CODEWITHSUNDEEP
htmlcsscss-float
copenndthagen
copenndthagen

Reputation: 50732

Question on CSS float

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)

Upvotes: 2

Views: 141

Answers (3)

wsanville
wsanville

Reputation: 37516

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.

Upvotes: 2

Yacoub Oweis
Yacoub Oweis

Reputation: 372

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

Upvotes: 1

Jason Gennaro
Jason Gennaro

Reputation: 34855

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/

Upvotes: 0

Related Questions