...

View Full Version : RWD background color disappear



Vytfla
07-25-2012, 11:04 PM
Can anyone tell me why when I add a float:left to my divs the container/main background colors disappear?

HTML

<body>
<div id="container">
<div id="main">
<div id="left">

</div>

<div id="center">

</div>

<div id="right">

</div>
</div>
</div>
</body>

CSS

* {
margin: 0 auto;
}

body {
background-color: #000;
}

div#container {
margin: 0.625em auto;
width: 95%; /* 960px */
background-color: rgb(51,51,51);
}

div#main {
width: 93.75%; /* 900px / 960px */
background-color: rgb(59,59,59);
}

div#left, div#center, div#right {
float: left;
height: 12.5em;
width: 32.22222222222222%; /* 290px / 900px */
margin: 0 1.11111111111111% 0 0; /* 10px / 900px */
background-color: rgb(0,102,204);
}

sunfighter
07-26-2012, 09:36 PM
float is a positional command just like position:absolute. It pulls your div out of the natural flow of things. In this case out of the container and main divs, they no longer have a height and so disappear. Try this to see whats happening:



div#left{
height: 12.5em;
width: 32.22222222222222%; /* 290px / 900px */
margin: 0 1.11111111111111% 0 0; /* 10px / 900px */
background-color: rgb(0,102,204);
border: pink solid 1px;
}
div#center, div#right {
float: left;
height: 12.5em;
width: 32.22222222222222%; /* 290px / 900px */
margin: 0 1.11111111111111% 0 0; /* 10px / 900px */
background-color: rgb(0,102,204);
}
Your left div stays in normal position.

Keleth
07-26-2012, 10:43 PM
Google "clearfix". As mentioned, when you float an element, it's parent no longer counts it towards its own height/width. By clearing the content, you can force the height/width back, but clearing can sometimes cause problems. Clearfix is a CSS class you can apply to the parent that uses psudoclasses to generate the content you need without having to worry about having a clear in there all the time and screwing up other material.

Vytfla
07-27-2012, 12:39 AM
Google "clearfix". As mentioned, when you float an element, it's parent no longer counts it towards its own height/width. By clearing the content, you can force the height/width back, but clearing can sometimes cause problems. Clearfix is a CSS class you can apply to the parent that uses psudoclasses to generate the content you need without having to worry about having a clear in there all the time and screwing up other material.

Ahh that's right, I forgot.

It worked when I assigned it to a new div after main. Thanks.

Vytfla
07-27-2012, 12:56 AM
float is a positional command just like position:absolute. It pulls your div out of the natural flow of things. In this case out of the container and main divs, they no longer have a height and so disappear. Try this to see whats happening:



div#left{
height: 12.5em;
width: 32.22222222222222%; /* 290px / 900px */
margin: 0 1.11111111111111% 0 0; /* 10px / 900px */
background-color: rgb(0,102,204);
border: pink solid 1px;
}
div#center, div#right {
float: left;
height: 12.5em;
width: 32.22222222222222%; /* 290px / 900px */
margin: 0 1.11111111111111% 0 0; /* 10px / 900px */
background-color: rgb(0,102,204);
}
Your left div stays in normal position.

With this way it seems that since left isn't floated, center and right go to the next line.

Arbitrator
07-27-2012, 01:46 AM
Google "clearfix". As mentioned, when you float an element, it's parent no longer counts it towards its own height/width. By clearing the content, you can force the height/width back, but clearing can sometimes cause problems. Clearfix is a CSS class you can apply to the parent that uses psudoclasses to generate the content you need without having to worry about having a clear in there all the time and screwing up other material.A more modern fix would be to simply use overflow: auto on the #main element.


With this way it seems that since left isn't floated, center and right go to the next line.If you want flush top alignment for all of these elements, then the floating elements need to appear first in the source code.

Based on your ID names, presumably, you'll get the layout you want if you float the #left element to the left, the #right element to the right, and make sure those two elements occur before the (non-floating) #center element in the source code. To preserve left and right margins on #center, you will need to add the widths of the #left and #right elements to the left and right margins of #center, respectively.

If you expect the #left and #right elements to at any time have more content than the #center element, then make sure you apply overflow: auto to #main to prevent the two floating elements from overflowing the bottom of #main.

sunfighter
07-27-2012, 12:58 PM
float is a positional command just like position:absolute. It pulls your div out of the natural flow of things. In this case out of the container and main divs, they no longer have a height and so disappear. Try this to see whats happening:

PHP Code:
div#left{
height: 12.5em;
width: 32.22222222222222%; /* 290px / 900px */
margin: 0 1.11111111111111% 0 0; /* 10px / 900px */
background-color: rgb(0,102,204);
border: pink solid 1px;
}
div#center, div#right {
float: left;
height: 12.5em;
width: 32.22222222222222%; /* 290px / 900px */
margin: 0 1.11111111111111% 0 0; /* 10px / 900px */
background-color: rgb(0,102,204);
With this way it seems that since left isn't floated, center and right go to the next line. Yes, that's what I said and what the css was trying to show. It was in response to your qustion:
Can anyone tell me why when I add a float:left to my divs the container/main background colors disappear?
You never asked to keep the three divs inside your #main, so I never told you how. Arbitrator gave you the correct way of doing this.

Vytfla
07-29-2012, 12:04 AM
A more modern fix would be to simply use overflow: auto on the #main element.

If you want flush top alignment for all of these elements, then the floating elements need to appear first in the source code.

Based on your ID names, presumably, you'll get the layout you want if you float the #left element to the left, the #right element to the right, and make sure those two elements occur before the (non-floating) #center element in the source code. To preserve left and right margins on #center, you will need to add the widths of the #left and #right elements to the left and right margins of #center, respectively.

If you expect the #left and #right elements to at any time have more content than the #center element, then make sure you apply overflow: auto to #main to prevent the two floating elements from overflowing the bottom of #main.

Awesome, thanks. Overflow worked; gonna try and figure out the second part now



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum