0

I'm having some problems with float issues and them floating outside their containers.

I know that you can use clears in this issue but I don't really understand what they do or where they should go to solve the problem.

I've created a clear class so I can use <br class="clear" />

Live site with the problem can be seen here:

http://www.rubytuesdaycreative.co.uk/testsite/shop.html

braX
  • 11,506
  • 5
  • 20
  • 33
Francesca
  • 26,842
  • 28
  • 90
  • 153
  • Do you mean that the containers are smaller than the content? The proper way in css3 is to use overflow. Here is a link to a tutorial: http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow – Eric Leroy Oct 14 '12 at 21:40
  • Your actual site is a little too complex to server as a code sample here. Try to create a simpler example of the same problem you're having. (I.e. remove header, make element contents trivial, and say which element is rendering where it shouldn't and how you want it to render._ – millimoose Oct 14 '12 at 21:50
  • A simple illustration of the basic idea of how float and clear interact is here: http://jsfiddle.net/RkzYz/6/. Basically, elements that are `float`ed will render **over** and potentially **out of** ("hang down" from) other regular (non-floated, non-cleared) content and overlap it. Elements that are floated on the same side will stack vertically if space permits, and have behaviour that's uselessly unpredictable if not. Elements that are `clear: both` will render **below** any previous floated elements. Elements that follow `clear`ed elements will then render normally below them. – millimoose Oct 14 '12 at 21:59
  • The behaviour of `float`s affects both the elements that follow them in a container, and the container itself. (And consequently, anything that follows the container.) Analogously, a `clear` then makes those behave "normally" again. The fact that this mechanism is the only widely supported way of laying out HTML and requires either rote-learning "techniques", or knowing what the hell a block rendering context is is what makes CSS insane, why grid frameworks proliferate, and why http://giveupandusetables.com/ exists. – millimoose Oct 14 '12 at 22:08

4 Answers4

4

float means "Move to the side, and let content that follows this element appear beside it"

clear means "If something before me is floating, stay below it".

You can use clear to make a container expand around its floating content — by setting clear: both on a zero height element that appears after the floating content but inside the container — but it isn't the cleanest approach to solve that problem.

Set overflow: hidden on the container instead. This will establish a new block formatting context and cause the container to expand to contain the floated children.

Community
  • 1
  • 1
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks, this seems to work best of all suggestions. I understands that floats are not usually used as they should be in web design, but wasn't aware that overflow could be used as a fix. It worked! – Francesca Oct 14 '12 at 21:47
1

Clear is used in the div that is being invade by the other. So if part of div1 goes into div2 and div one is left of div2, then in div2 insert clear:left.

FrostyFire
  • 3,212
  • 3
  • 29
  • 53
1

To fix your problem add overflow:hidden to #content.

#content {
    margin-top: 60px;
    text-align: center;
    overflow: hidden;
}

This is only one possible solution. Just as hint: http://www.quirksmode.org/css/clearing.html

To your question: I do not recommended you to add extra markup to your document to clear floats. It's a bad practice! A quite common and stable solution is the micro clearfix hack introduced by Nicolas Gallagher. You have only to add one class to your #content and you're ready to go.

gearsdigital
  • 13,915
  • 6
  • 44
  • 73
0

You should apply clear: both to a block-level element (like div) after the last floated element. That way the cleared element will be positioned below all of the floated elements, and it will push the bottom of its container down to cover them.

nathan
  • 5,466
  • 3
  • 27
  • 24