CODEWITHSUNDEEP
htmlcss
pufAmuf
pufAmuf

Reputation: 7805

Float: left breaks container div?

I have a modal box where I'm trying to put two columns beside each other, and I did that by assigning float: left to one div (.center-columnb) and a float: right to .map-column. What happens, however is that 'center-columnb' breaks the container div with the grey gradient background as if this div was placed UNDER that container div (notice the rounded edges on the bottom of the grey part, that was meant to be at the bottom of the div. When I remove float: left from centercolumnb from style.css, everything is ok except that the column on the right does not stay there anymore. Does anyone have any alternatives that could help me? Thanks :)

Upvotes: 14

Views: 11839

Answers (2)

fanfavorite
fanfavorite

Reputation: 5199

Another way is to clear at the bottom of the Question container. For a full cross browser compliant solution, just add before the closing div:

<div style="clear:both"></div>

Upvotes: 11

DA.
DA.

Reputation: 40671

You have a parent div of #contentholder but it's not containing the floats within it at this point. A floated element, by default, is taken out of the document flow and any parent div will collapse. To make it contain the floats within, you need to give it an overflow property. This should do the trick:

#contentholder {
    overflow: auto;
}

Upvotes: 29

Related Questions