Question on CSS float

Question

It is said that The floated box is shifted to the left or right until its margin edge touches the padding edge of the containing block, or the margin edge of another floated element

However i do not think this is correct. Could you please provide an example or an explanation of the correct interpretation (both cases ; for a first child div and other sibling divs)

Which part don't you consider correct. Can *you* provide an example of where you see otherwise? — Joseph Silber, Aug 30 '11 at 17:26
Unfortunately i am on my iPad now and so do not have the code..but in my example, the float left did not touch padding edge of containing block.. — copenndthagen, Aug 30 '11 at 17:28
i have got some outstanding answers...specially tge jsfiddle demo posted..i am sure this is going to help a lot of people confused with the ACTUAL working of float..Once again, thx for all your efforts and providing GREAT SOLUTIONS..If i could, i would have accepted all the answers..but unfortunately will have to think of 1.. — copenndthagen, Aug 30 '11 at 18:09

wsanville · Accepted Answer · 2011-08-31T12:26:50.253

2

See this demo page.

The floated box is shifted to the left or right until its margin edge touches the padding edge of the containing block

Correct. The div labeled First item is offset a total of 30px, due to the 10px of padding on its container and 20px due to its margins.

or the margin edge of another floated element

Also correct. Notice how there is a total of 40px between First item and Second item, due to both elements having 20px of margins all around.

Updated for comments: Floating an element takes it out of the normal flow of the document. That is, non-floated elements will not "make room" for floated elements. In most examples, using overflow: hidden; to clear floats is equivalent to the other methods, so I use it because it's less markup. For more info, see the Quirksmode article and a counter example for overflow hidden.

edited Aug 31 '11 at 12:26

answered Aug 30 '11 at 17:32

wsanville

37,158
8
76
101

just one question..i see that adding float left tp the container div makes no difference at all..any reasons why is that so? – copenndthagen Aug 30 '11 at 18:11
And must say..your jsfiddle example is EXTREMELY WELL THOUGHT OUT..Deserves a 1000+ vote.. – copenndthagen Aug 30 '11 at 18:14
To answer your comment, the reason why floating the container didn't change anything, is because I included an extra property to "clear" the effect of floating the child elements (I used `overflow: hidden;`), which has the same end result as floating the container. For your understanding, try the same modification on this version, without `overflow: hidden;`: http://jsfiddle.net/skjhe/ – wsanville Aug 30 '11 at 19:18
Thanks again...2 questions; 1. Could you please provide an explanation of adding the overflow:hidden property...Does it impact the container itself OR does it impact the child element indirectly ? 2. What is the correct or better way of implementing this for any cross-browser compatible layout ? (floating container OR adding overflow property) – copenndthagen Aug 31 '11 at 07:50
In my trial tests, I also found that for the container, if we specify either some width OR overflow:hidden OR float attributes, it respects the width occupied by the child floated element...So i am a bit confused as to whether floated elements are indeed part of the document flow OR it depends..like how absolute positioned elements are removed from the document flow (and guess that happens always).. – copenndthagen Aug 31 '11 at 10:46
Thx a lot again..one last question before i accept your answer...you say "non-floated elements will not "make room" for floated elements"...so is the reverse also completely true...i.e. Floated elements will make room for floated elements? – copenndthagen Sep 01 '11 at 08:14
1

Correct! Floated elements will make room for other floated elements. – wsanville Sep 01 '11 at 11:20
wsanville : I have opened a new CSS related question...in case you may be interested ....http://stackoverflow.com/questions/7318056/question-on-css-overflow – copenndthagen Sep 06 '11 at 09:59
Hey..i was just playing around with the example u gave and came across one more thing...If i remove overflow for the container and add an extra div
1
it still is kind of considering the floated sub boxes within the document flow...that is to say if i add the div before all other sub boxes, it shifts the other sub boxes down, while if i add after all the sub boxes, the div is printed after a gap of almost 200px...My point is it should not consider the floated subboxes if i have removed the overflow property... – copenndthagen Sep 07 '11 at 04:34

Yacoub Oweis · Answer 2 · 2011-08-30T17:54:16.417

1

here is a simple example..

<style>
.size1{
   width: 50px;
   height: 50px;
   margin: 10px;
 }
 .size2{
   width: 400px;
   height: 400px;
   padding:50px;
 }
 .red{background-color:red;}
 .blue{background-color:blue;}
 .yellow{background-color:yellow;}
</style>

<div class='size2 red'>
  <div class='size1 blue' style='float:right'></div>
  <div class='size1 yellow' style='float:right'></div>
</div>

enter image description here

edited Aug 30 '11 at 17:54

answered Aug 30 '11 at 17:41

Yacoub Oweis

352
4
11

Jason Gennaro · Answer 3 · 2011-08-30T17:34:28.083

Your quote is correct

The floated box is shifted to the left or right until its margin edge touches the padding edge of the containing block, or the margin edge of another floated element

Basically it mirrors the spec:

“Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float.”

http://www.w3.org/TR/CSS2/visuren.html#floats

As far as I know, outer edge also includes margin and padding.

See this example here, where margin and padding are respected.

Example: http://jsfiddle.net/jasongennaro/K6mK5/

Question on CSS float

3 Answers3