CSS float proprerty issue ( + guidance )

Question

I need some help figuring out why my layout is messy. Here is what I was working on :The Site. The green box should be inside the purple box. I think there is a floating issue. Since I don't fully understand the float rules can someone help me identify the problem and suggest some good "old" documentation reading?

Thank you!

Please see http://stackoverflow.com/questions/8554043/what-is-clearfix and http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best for useful background reading and answers to your problem — andyb, Apr 08 '13 at 09:52
My recommended solution is to use `display:inline-block` elements and avoid floating elements altogether — andyb, Apr 08 '13 at 09:56
@Adam this is working but can you tell me some consequences by using this? Or there aren't any, because if i have `height:auto` the content will never be overflowing. — Tbi45, Apr 08 '13 at 10:08
I've used that method for as long as I can remember and from my experience it's consistent in most browsers. I can't remember what it's like in <=IE7 but IE8+ it's good. The only issues I can think of are if you need the wrapper to be a fixed height. It will obviously cut off any overflowing content (Note, you can also use `overflow: scroll` I believe). Also in some instances you may have a fixed container at `200px` tall with two `div`'s floated left and right inside it. If you had an item inside one of the children that expanded on click (e.g. facebook `Like` button) it will also get cut off — Adam Tomat, Apr 08 '13 at 10:27
And some light reading on the topic [Float containment](http://colinaarts.com/articles/float-containment/), and [The magic of “overflow: hidden”](http://colinaarts.com/articles/the-magic-of-overflow-hidden/) — Adam Tomat, Apr 08 '13 at 10:30

score 3 · Accepted Answer · answered Apr 08 '13 at 10:02

3

Add an overflow: hidden; to the div with id: content-n

#content-n {
    clear: left;
    position: relative;
    width: 980px;
    overflow: hidden; /* add this */
}

answered Apr 08 '13 at 10:02

Seer

739
4
22

Can you tell me why is this happening? Some consequences maybe? It works but... why? – Tbi45 Apr 08 '13 at 10:04
2

The #content div contains the #content-n div which has no height property given. If you add the overflow:hidden; property to it, than it will have the height of the element in it, so the height of the #nav_cat element. So when #content-n has a height, too, the #content div will strech to "contain" that element. – Seer Apr 08 '13 at 10:13
Yep! I just figured it out by myself. Thank you anyway. – Tbi45 Apr 08 '13 at 10:15
Cool. If this was the answer what you were looking for, then you can accept it, too :) – Seer Apr 08 '13 at 10:22
@Seer please see http://meta.stackexchange.com/questions/88535/asking-for-someone-to-accept-your-answer – andyb Apr 08 '13 at 10:26
Thank you @andyb for the usefull information. – Seer Apr 08 '13 at 10:27

score 0 · Answer 2 · edited Jan 29 '14 at 22:40

0

Float removes the item from the document flow.

Add an empty <div> or <span> and give it the CSS clear: both;. This will make the div clear the floated element and it's parent will then expand to the full height.

Read up on clearfix and floats - particularly the section titles "Techniques for Clearing Floats".

Source(s)

CSS Clearfix
All About Floats

edited Jan 29 '14 at 22:40

animuson

53,861
28
137
147

answered Apr 08 '13 at 09:52

Bill

3,478
23
42

so this explains why if i remove the `float` property everything enters (visualy) back in the box. – Tbi45 Apr 08 '13 at 09:56

score 0 · Answer 3 · answered Apr 08 '13 at 09:52

The items inside your #container are all floating left.

This means that they'll all stack up to the left until they reach the width of the containing element, at which time they'll start to wrap (as has happened in your case).

The containing element that holds the floating items will not expand to contain floating elements. One way you can force this is to do something like:

#container:after{
 content: ".";
 clear: left;
 visibility: hidden;
}

This basically adds a full stop at the end of the div, sets it to clear left (so it clears all the floating items), and is then set to be invisible, forcing the container to extend past its content.

It adds a dot (full stop) to the bottom of the containing div. See the last part of my answer. — Jamie Dixon, Apr 08 '13 at 10:37

score 0 · Answer 4 · answered Apr 08 '13 at 09:59

Well,

Here is what I would like to recommend you to read on Float

http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

Apart from that, if you edit #content positioning from relative to absolute. That will wrap green box inside purple since it will take position related to parent (#content that is)..

#content {
   position: absolute;
   ..
   ..
   ..
}

Floating is very good feature when used with care.

CSS float proprerty issue ( + guidance )

4 Answers4