Maybe this is a problem with sticky footer, maybe not. Not quite sure. I want divs inside my footer to all line up side by side using float:left, but they seem to be stacking on top of each other, and I'm not sure why.
HTML:
<div id="footer_container">
<div id="footer_content">
</div>
<div id="footer_content">
</div>..etc
CSS:
#footer_content {
font-size:18px;
float:left;
padding:0 35px;
color:#EEEEEE;
text-align:left;
height:150px;
width:150px;
}
Plus all the usual sticky footer stuff:
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#footer, .push {
height: 175px;
}
#footer_content a{
color:#989393;
}
#footer_container{
width:1100px;
height:175px;
}
You need to change the footer_content to a class instead of an id.
You cannot duplicate your element id's. Element id's must be unique, but you use id=footer_content more than once. Browsers tend to ignore subsequent elements with the same id.
Change them all to classes.
<div class="footer_content">
</div>
<div class="footer_content">
</div>
and
.footer_content {
font-size:18px;
float:left;
padding:0 35px;
color:#EEEEEE;
text-align:left;
height:150px;
width:150px;
}
Demo using your code with only that one id changed into a class...
http://jsfiddle.net/DRfuH/
Appears to be working as they are now side-by-side.
Related
I have a blank HTML page and I want to align 2 elements...Vertically and Horizontally. These elements are a <img> tag, a <p> tag for text, and 2 <div> tags for containing those elements...
When I resize my window I don't want these elements to be cut-off by my browser. After countless hours of trying to figure this out, and searching Stack and various other websites...I came close, but I could never get it 100% like I want it...
There's this white-space at the bottom and the ride side of the bordered second div near the text, and the culprit appears to be the <p>. When I get rid of the tag the white-space goes away. However, I want the text under the image so I need it...
The white-space is making me question whether the content is placed in the center or not. How can I get rid of it?
HTML
<body>
<div id="container">
<div id="content">
<p>
<img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction">
<br> UNDER CONSTRUCTION!
</p>
</div>
</div>
</body>
CSS
body
{
margin:0;
background-color: seagreen;
}
#container
{
position:relative;
height:100%;
width:100%;
min-width:400px;
}
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
outline:3px solid red;
}
#content p
{
margin:0;
text-align:center;
font-family:Courier;
font-size:48px;
white-space:nowrap;
color:springgreen;
}
I changed you HTML to enclose your text in a span tag and removed the br:
<body>
<div id="container">
<div id="content">
<p>
<img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction">
<span>UNDER CONSTRUCTION!</span>
</p>
</div>
</div>
</body>
Then I added this to your CSS. It styles the enclosing span as a block, so you don't need to <br> tag in your HTML. It also uses line-height to adjust spacing above and below the line of text.
#content span {
display: block;
margin: 0;
line-height: .8;
}
And removed the position attribute from here:
#container
{
/*position:relative;*/ /* Removed */
height:100%;
width:100%;
min-width:400px;
}
Here is a sample fiddle
UPDATE
It appears the reason why you are seeing white-space still on Firefox is that you are using outline instead of border on your CSS for #content.
I don't know exactly why Firefox is rendering the outline differently. But if you change your CSS for #content to the following, you'll get the same result on Chrome, Firefox, Edge and IE (11).:
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*outline:3px solid red;*/
border: 3px solid red;
}
Here is the updated fiddle
I have gone through your code . i have made some changes in above given code . I hope this gone be helpful to you.
CSS
body
{
margin:0;
background-color: seagreen;
}
img{
display: block;
margin: auto;
width: 50%;
}
/* add this css to remove the white space under text */
p
{
margin-bottom: -9px !important;
}
#container
{
position:relative;
height:100%;
width:100%;
min-width:400px;
}
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
outline:3px solid red;
margin-top: 200px;
padding-top: 10px;
}
#content p
{
margin:0;
text-align:center;
font-family:Courier;
font-size:48px;
white-space:nowrap;
color:springgreen;
}
<div id="container">
<div id="content">
<img src="http://spectrumapartments.com.au/wp-content/themes/spectrumapartments/img/building/red-squares.png" alt="Under Construction">
<br>
<p>UNDER CONSTRUCTION!</p>
</div>
</div>
I GAVE IT ANOTHER TRY, HOPEFULLY THIS WILL SOLVE IT FOR YOU. YOU SOUND VERY DESPERATE.
*{
border: 0;
margin: 0;
margin: 0;
}
.container {
font-size: 0;
}
.container span {
font-size: 35px;
background: #ff8ea1;
padding: 0;
margin: 0;
}
.container span.no-space {
display: inline-block;
vertical-align: top;
height: .75em;
line-height: .75em;
}
<div class="container">
<span>Under Construction</span>
<div style="height: 20px;"></div>
<span class="no-space">Under Construction</span>
</div>
TRY THIS ONE!
I'm trying to get the "item" links inside the "menu" to stay inside the "navWrapper"/"navContent" when the browser is resized.....yet when I decrease the width of the browser window they keep staying off to the right outside these divs....any ideas on how to keep them all contained inside the nav area?
<div id="navWrapper">
<div id="navContent">
<div id="logo"><img src="assets/logo.png"></div>
<div id="menu">
<div class="item">dadada</div>
<div class="item">dadada</div>
</div>
</div>
#navWrapper {
background-color:#3f3f3f;
margin-left: 20px;
margin-right: 20px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top:0 auto;
}
#navContent {
width:950px;
height:65px;
}
#navContent #logo {
width:200px;
float:left;
display:inline;
margin-left:30px;
margin-top:15px;
}
#navContent #menu {
width:466px;
height:25px;
float:right;
display:inline;
border: 1px solid #ffffff;
margin-right:30px;
margin-top:15px;
}
Hopefully this is what you are looking for:
http://jsfiddle.net/disinfor/7XFsH/
HTML
<div id="navWrapper">
<div id="navContent">
<div id="logo">
<img src="assets/logo.png" />
</div>
<!-- #logo -->
<div id="menu">
<div class="item">dadada
</div>
<div class="item">dadada
</div>
</div>
<!-- #menu -->
</div>
<!-- #navContent -->
</div>
<!-- #navWrapper -->
CSS
#navWrapper {
background-color:#3f3f3f;
margin-left: 20px;
margin-right: 20px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top:0 auto;
}
#navContent {
width:100%;
height:65px;
}
#navContent #logo {
width:200px;
float:left;
display:inline;
margin-left:30px;
margin-top:15px;
}
#navContent #menu {
height:25px;
float:right;
display:inline;
border: 1px solid #ffffff;
margin-right:30px;
margin-top:15px;
}
.item {
float:left;
position:relative;
padding-left:10px;
}
.item a {
color:white;
}
It also makes the navContent responsive.
if you keep the menu with a fixed width that is going to happen always.
I suggest you to dig into mediaqueries so, depeding on the screen resolution, are the styles you might set.
Also you can try by setting the navContent like this:
#navContent {max-width:950px;} /* instead of width */
And remove the width in the #menu, is not required if is floated.
This way the nav is not going to be wider than its containers (be sure there are no containers with a fixed with).
I insist, if you want to be very accurate on the result, try by appliying mediaqueries.
Here some documentation and a cool tool to detect what resolution you are viewing [link]
This method is only recommended if your header does not have an expanding height (ie, if the navigation isn't supposed to wrap
Give the container a min/max width, but let it use "auto" as the actual width. The minimum will allow users on small screens/devices to scroll over and use your navigation, rather than letting it spill off screen and potentially out of the box. It still goes off-screen, but in an expected way. (tip: use an #media query to change the menu layout on those small screens)
#navWrapper {
width: auto;
max-width: 960px;
min-width: 560px;
}
Position the #navContent so that it is relative and does not have a width. This will let you position children elements relative to this div. Note that you must specify a height for this container as well, but you have already done that in your CSS
#navContent {
position: relative;
width: auto;
}
Now position the elements that should appear in the menu. Don't bother with margin or padding for the original elements. Use absolute positioning. Get it perfect.
The magic, you can attach this to the right of the menu.
#navContent #logo {
position: absolute;
top: 15px;
left: 30px;
/* Used to reset your CSS */
margin: 0;
}
#navContent #menu {
position: absolute;
top: 15px;
right: 30px;
/* Used to reset your CSS */
display: block;
float: none;
margin: 0;
}
For the navigation, I suggest the .item classes be inline, and the links be floated blocks. This means the "items" won't be much more than a wrapper, and the links can be given a background or borders without the strange "deadzone" between them. Padding on navigation links is great for usability & touch devices.
#navContent #menu .item {
display: inline;
}
#navContent #menu .item a {
display: block;
float: left;
/* padding, background, border... go nuts */
}
You don't need to clear the navigation in this case, since the #menu is positioned absolutely it won't affect other elements to begin with.
try this
html
<div id="navWrapper">
<div id="navContent">
<div id="logo"><img src="assets/doityourweb-logo.png"/></div></div>
<div id="menu">
<div class="item">dadada</div>
<div class="item">dadada</div>
</div>
</div>
css
#navWrapper {
background-color:#3f3f3f;
margin-left: 20px;
margin-right: 20px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top:0 auto;
}
#navContent {
width:950px;
height:65px;
}
#navContent #logo {
width:200px;
float:left;
display:inline;
margin-left:30px;
margin-top:15px;
}
#navContent #menu {
width:466px;
height:25px;
float:left;
padding-left:8%;
display:inline-block;
border: 1px solid #ffffff;
margin-right:50px;
margin-top:15px;
}
.item{
display:inline-block;
}
http://jsfiddle.net/U6B8x/
P.S i dont know where you want to close your #navContent so check and tell
I am currently coding my first website, and one of the elements I have are "story blocks" that are a fixed width and split between images and text, but all in one div. Here is an image for reference: http://i.imgur.com/FAbi4xF.jpg?1.
Let me explain the different parts going on here: an image with a slight black overlay as well as text on the left, and then text describing the story on the right. Currently, I have an inefficient way of creating this element, involving two separate divs and disparate headers for the story titles. Here is the HTML:
<div class="story-image">
<h2 class="story-head">STORY TITLE</h2>
<img src="http://gearpatrol.com/wp-content/uploads/2012/06/microsoft-surface-gear-patrol1.jpg"/>
</div>
<!--this ends the image and title part, begins the text part-->
<div class="story-text">
<h5>Story description.</h5>
</div>
And the CSS:
.story-image {
position: inherit;
background-color: rgba(0,0,0,.39);
margin-left: 58px;
margin-bottom: 4px;
float: left;
overflow: hidden;
width: 220px;
height: 100px;}
.story-head {
position: absolute;
text-align: center;
vertical-align: middle;
color: white;
font-weight: 800;
width:220px;
line-height:100px;}
.story-text {
background-color: white;
width: 200px;
line-height: 100px;
height:100px;
float: left;}
.story-text h5 {
padding-left:8px;
padding-top: 20px;
vertical-align: middle; }
As you can see, it isn't the most efficient way of doing this sort of thing and can cause issues where the two elements break away from eachother (example here: http://i.imgur.com/eBF8Rwa.png). I cannot figure out a way to have one single div that is divided between image and text. Does anyone know of a possible way to do this? Thank you and happy holidays!
Try this:
CSS
.container {
width:400px;
display:inline-block;
height:80px;
margin-right:10px;
padding:0;
}
.left {
display:table-cell;
vertical-align:middle;
width:120px;
margin:0;
padding:0;
height:80px;
background-image:url(URL);
background-size:100%;
}
.right {
display:table-cell;
vertical-align:middle;
width:280px;
padding:0 10px;
}
HTML
<div class="container">
<div class="left">tjen<br>a</div>
<div class="right">tjen<br>a</div>
</div>
JSFiddle demo.
The problem with the two elements becoming break appart in some situations should be gone, and you can change vertical-align:middle to top or bottom if you want the text to have a different position in the div. Hope this helps!
I want to make the content div fill in the rest of the page. But it only fills up what it has and then doesn't fill the rest of the page. Basically, if the height of the content is 20% of the view port, the div will fill in the rest of the view port with nothing (a white background with a 80% opacity). BUT it should wrap to the content if the content is more than the height of the view port. I have a the following code:
<body>
<div id="page-wrapper">
<div id="header-wrapper">
<!--Fixed size header, 180px-->
</div>
<div id="content-wrapper"> <!-- Wrapper for the content, this bit should fill the rest of the view port unless content is larger than the view port, to which this div then wraps... -->
<div id="content-banner"> <!-- A scrolling image banner with photos -->
</div>
<div id="content"> <!-- The actual content of the page -->
Some Mock content
</div>
</div>
</div>
</body>
And here is my CSS:
html, body {
height: 100%;
color:black;
margin: 0;
}
body {
background:black;
margin:0px;
}
#page-wrapper {
background:blue;
display:block;
margin-top:0px;
width:900px;
position:absolute;
left:50%;
margin-left:-450px;
height:100%;
border:thin solid black;
}
#header-wrapper {
background:green;
display:block;
margin-top:0px;
width:900px;
height:180px;
border-bottom-left-radius:75px;
box-shadow:0 0 10px #000;
}
#content-wrapper {
background:white;
display:inline-block;
position:relative;
top:25px;
width:900px;
border-top-right-radius:75px;
overflow:scroll-y;
box-shadow:0 0 10px #000;
margin-bottom:-125px;
}
#content-banner {
background:red;
display:inline-block;
position:relative;
margin:10px 10px 0 10px;
width:880px;
height:160px;
border-top-right-radius:65px;
overflow:hidden;
}
#content-banner img {
border-top-right-radius:65px;
width:880px;
height:160px;
}
#menu-wrapper {
background:green;
display:inline-block;
position:relative;
width: 200px;
margin-left:10px;
}
#content {
display:inline-block;
position:relative;
margin-top:10px;
line-height:30px;
vertical-align:top;
}
Also, before all the duplicate people come here with your linkage ;) I've already read through and tried all these questions:
Streching (sic) div to fill body
CSS: height- fill out rest of div?
Make the BODY DIV Fill the Available Area
make div fill the rest of the browser viewport
Could someone please assist me. I would like to stay away from javascript for this.
EDIT 1 : 27/09/2012 08:35 CAT
I've added a jsFiddle example to show you what I mean. It can be viewed here: http://jsfiddle.net/vwKcs/2/ I also added some missing code. Sorry about that.
There ist a pretty easy way to achieve that if you know the height of your header: use absolute positioning. The content will take the whole 100% of the height and the first element inside it has a margin-top. in this white space, you position your header again with position: absolute;
(just the code which is needed for the effect)
#header-wrapper {
position: absolute;
height: 180px;
width: 900px;
top: 0;
left: 0;
}
#content-wrapper {
position: absolute;
height: 100%;
width: 900px;
top: 0;
left: 0;
}
#content-wrapper>*:first-child {
margin-top: 180px;
}
but against Stone i have to say: please just post the code which is needed to solve your problem. I am not interested in any image paths if I have to solve a layouting issue
I do NOT want a FIXED footer, I need a STICKY footer.
My sticky footer worked fine at first but when the content is at a certain height, there is a margin between the footer and bottom of the page.
Try messing with the browser height and content div height, and you should see where the problem is.
It leaves an awkward margin between the footer and the bottom of the page.
Thank you in advance.
CSS Code:
html, body {
height:100%;
margin:0;
}
body {
color:#FFF;
font:16px Tahoma, sans-serif;
text-align:center;
}
a {
text-decoration:none;
}
#wrapper {
height:100%;
margin:0 auto;
min-height:100%;
padding-bottom:-30px;
width:985px;
}
#content {
background:#F00;
height:950px;
}
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
}
#footer span {
color:#FFF;
font-size:16px;
padding-right:10px;
}
#push {
clear:both;
height:30px;
}
HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Bad Footer</title>
<link rel="stylesheet" href="badfooter.css" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="content">
<span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span>
</div>
<div id="push"></div>
</div>
<div id="footer">
<span>About Us</span>
<span> | </span>
<span>Contact Us</span>
<span> | </span>
<span>Home</span>
</div>
</body>
Just add position: fixed; to your footer class in your css:
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
position: fixed; /*add this new property*/
}
-----UPDATE-----
If you need a footer that stays at the bottom you need two things:
#wrapper {
/*height:100%;*/ /*you need to comment this height*/
margin:0 auto;
min-height:100%;
padding-bottom:-30px;
width:985px;
position: relative; /*and you need to add this */
}
#footer {
background:#000;
border-top:1px solid #00F0FF;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
position: relative; /*use relative position*/
}
#wrapper {
/*height:100%;*/ /*you need to comment this height*/
margin: 0 auto;
min-height: 100%;
min-height: 700px; /* only for Demo purposes */
padding-bottom: -30px;
width: 985px;
position: relative; /*and you need to add this */
}
#footer {
background: #000;
border-top: 1px solid #00F0FF;
height: 30px;
margin-top: -30px;
padding: 5px 0;
width: 100%;
position: relative; /*use relative position*/
}
<div id="wrapper">
<div id="content">
<span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span>
</div>
<div id="push"></div>
</div>
<div id="footer">
<span>About Us</span>
<span> | </span>
<span>Contact Us</span>
<span> | </span>
<span>Home</span>
</div>
Add position: fixed to the footer class. Note it doesn't work in certain old versions of Internet Explorer. http://jsfiddle.net/kAQyK/
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
position: fixed;
bottom: 0px;
left: 0px;
}
See http://tagsoup.com/cookbook/css/fixed/ for examples how to make it also work in IE
I was having the same issue for ages and nothing seemed to work then I realised that the whitespace I was seeing under my footer was not actually whitespace at all but the overflow from my footer with white text on a white background. All I had to do was to add:
overflow:hidden
to my footer in my css.
If anyone wants the solution that worked for me then it is the same as http://getbootstrap.com/2.3.2/examples/sticky-footer.html but with the added overflow:hidden
DISPLAY TABLE = NO JS and NO fixed height!
Works in modern browsers ( IE 8 + ) - I tested it in several browser and it all seemed to work well.
I discovered this solution because I needed a sticky footer without fixed height and without JS. Code is below.
Explanation: Basically you have a container div with 2 child elements: a wrapper and a footer. Put everything you need on the page ( exept the footer ) in the wrapper. The container is set to display: table; The wrapper is set to display: table-row; If you set the html, body and wrapper to height: 100%, the footer will stick to the bottom.
The footer is set to display: table; as well. This is necessary, to get the margin of child elements. You could also set the footer to display: table-row; This will not allow you to set margin-top on the footer. You need to get creative with more nested elements in that case.
The solution: https://jsfiddle.net/0pzy0Ld1/15/
And with more content: http://jantimon.nl/playground/footer_table.html
/* THIS IS THE MAGIC */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body {
margin: 0;
padding: 0;
}
html,
body,
#container,
#wrapper {
height: 100%;
}
#container,
#wrapper,
#footer {
width: 100%;
}
#container,
#footer {
display: table;
}
#wrapper {
display: table-row;
}
/* THIS IS JUST DECORATIVE STYLING */
html {
font-family: sans-serif;
}
#header,
#footer {
text-align: center;
background: black;
color: white;
}
#header {
padding: 1em;
}
#content {
background: orange;
padding: 1em;
}
#footer {
margin-top: 1em; /* only possible if footer has display: table !*/
}
<div id="container">
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="content">
CONTENT
<br>
<br>some more content
<br>
<br>even more content
</div>
</div>
<div id="footer">
<p>
FOOTER
</p>
<br>
<br>
<p>
MORE FOOTER
</p>
</div>
</div>