CODEWITHSUNDEEP
htmlcssheightcss-float
kettlepot
kettlepot

Reputation: 11011

Floating elements container won't cover them completely

I've got a main container, with floating divs in it. It stops before them and doesn't reach their bottom? What's the best cross-browser way of fixing that?

(page in question is http://lauradifazio.altervista.org/cms/ and the main container is a red div which stops under the cyan+orange one, because that one isn't floated)

Upvotes: 0

Views: 267

Answers (2)

Lucius
Lucius

Reputation: 963

There are mainly two ways of achieving this result, you need to either:

  • float left the main container (this solves your problem, but arises more, since the centered layout breaks up)
  • put an empty div with the style clear:left just before the closing tag of the main container

Since this concept is at the base of css design, I strongly advise you to have a look at this book: Gianluca Troiani - CSS: guida completa it covers all the aspects of css layout and coul really change your life.. it changed mine! :)

Buona fortuna

Upvotes: 1

meder omuraliev
meder omuraliev

Reputation: 186582

#container { overflow:hidden; zoom:1; }

To clear floats using hasLayout for IE, block formatting context for other.

This has gotta be the most asked CSS question on SO :)

Upvotes: 0

Related Questions