[Solved] Floats

[ryanckr]

Alright…

So I have a div (content-wrap) that is holding two columns.

As soon as I apply a float to any of the objects inside of the div, the height:auto; for content-wrap no longer works.

Code:

div#content-wrap{
width:872px; height:auto;
margin:0 auto;
background-color:#231a1c;
padding:20px 14px 20px 14px;
}
div#LsideBoxes{
height:265px; width:326px;
float:left;
}
div#main-content {
width:518px; height:auto;
float:right;
background-color:#eeeeee;
}

any thoughts?

[pab]

you have to clear your floats

try these two techniques

div#content-wrap:after
{
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}

or you can add a <br class="clear"/> right after your div#content-wrap

and in the css

.clear {clear:both;}

hope it helps

pab

[ryanckr]

seems to have worked.

thank you thank you…

[pab]

glad it helped.

which one did you end up using?

pab

[ryanckr]

I used the first one.

div#content-wrap:after
{
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}

[milkbottle]

https://css-tricks.com/all-about-floats/

is brlliant and explains all you need to know about floats, understanding them is so important, so that you can fix problems, I found this really useful. Chris also did a really cool video on this subject it’s about 15mins long but well worth watching

[Author]

Posts