4

I have two divs in the page with same width and height.

if I give float: left to the first div, the second div goes up (which is fine because the floated element is taken out of the normal document flow)

But, why the content of the div still shows in the default stack position?

JsFiddle is given below

http://jsfiddle.net/xR9Rd/2/

<div class="box0">Box 0</div>   
<div class="box1">Box1</div>

.box0 {
    width: 100px;
    height: 100px;
    background-color: brown;
    float: left;
}
.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Jinto
  • 847
  • 1
  • 11
  • 27
  • The `float:left` is actually normal behaviour of a div. Therefore nothing should happen. I like the explanation in [this](http://stackoverflow.com/a/23603302/2582496) answer from @BoltClock also. – jPO May 12 '14 at 07:32
  • 3
    @jPO: That's plainly wrong. The `float` property defaults to `none` on _any_ element. No elements are taken from the normal flow by default. – Zeta May 13 '14 at 06:57

6 Answers6

5

The width of each box is 100 pixels. When you float one over the other, there is no more horizontal space left in the second box for its content because it's completely occupied by the float, so the content has to wrap to the next line (and overflow the 100-pixel height in that process).

If you make the second box wider, the content will appear next to the float:

.box1 {
    width: 150px;
    height: 100px;
    background-color: red;
}

The content will never appear behind the float, however, because inline content will always wrap around floats (otherwise, floating won't be very useful).

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • @abhitalks: `overflow: hidden` causes the box to generate a block-formatting context, which makes it *immune* to surrounding floats. That causes the entire box to shift outside of the float and sit right next to it instead. – BoltClock May 12 '14 at 07:33
  • @abhitalks: It's a strange side-effect - normally you would expect the content to just disappear while the background remains behind the other box - but it is how it is. – BoltClock May 12 '14 at 07:42
  • Ya, I thought so. That's why I sought your attention. In fact applying just any `overflow` will cause this. The `div` already has a `block` context so that shouldn't actually matter! – Abhitalks May 12 '14 at 07:52
  • 1
    @abhitalks: Well, a block formatting context isn't quite the same as a block-level element; a `div` by itself doesn't generate a formatting context automatically. It's a rather complicated topic that's outside the scope of this question, but there are articles you can read if you want to find out more: http://reference.sitepoint.com/css/blockformatting http://stackoverflow.com/questions/6196725/how-does-the-css-block-formatting-context-work – BoltClock May 12 '14 at 07:54
  • Thanks a lot for the links, especially the second one. Great learning. That clears my confusion but will take some time to sink in. – Abhitalks May 12 '14 at 08:02
  • @BoltClock: I have got few more doubts when I started playing on this html further. Can you please take a look? http://stackoverflow.com/questions/23624372/how-the-block-element-works-inside-a-floated-div – Jinto May 13 '14 at 06:44
  • A question was marked as a duplicate of this (http://stackoverflow.com/q/23638434/1026459). However, your answer doesn't seem to fit in the situation of this: http://jsfiddle.net/6p52h/ vs this: http://jsfiddle.net/6p52h/2/ . Can you clarify why the element is placed on a new line when width is defined, but overlaps when no width is defined? – Travis J May 13 '14 at 20:24
4

When you float an element to left, it is taken out of the flow, the next element is laid out as if the first one did not exist. Then the floated element is placed. the textual content is given a special treatment such that the text starts flowing around the floated element.

In the above example, the first div was taken out of flow and the second div was placed ( still has the block context and starts from extreme left ) as if no other element existed. Then the floated div is placed. Since both has same size, there is an overlap. Then the text float mechanism kicks in and try to place the text around the floated div. The text container ( box1 ) does not have any space after the floated div ( both are overlapping ) it is naturally pushed down. one way to see it aligned to the box is to increase the second box width, so that the text gets contained.

Other option is to add margin-left to the second div so that the second div starts at an offset from the floated div and there is space for the content to align it self around the first div. See the example fiddle

.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-left: 100px;
}

http://jsfiddle.net/sreekarun/xR9Rd/8/

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
sreekarun
  • 167
  • 3
  • I have got few more doubts when I started playing on this html further. Can you please take a look? http://stackoverflow.com/questions/23624372/how-the-block-element-works-inside-a-floated-div – Jinto May 13 '14 at 06:44
2

In the above case both boxes will have their top-left corner aligned with each other. In this case, the browser cannot display the text in second div at the very top because the box is 100px wide and has 100px wide floated box before it. The text renders at first available spot in the div (which is where the floated content ends).

Salman A
  • 262,204
  • 82
  • 430
  • 521
0

Try this code:

<html>
<head>
<style>
.box
{
width:200px;
}
.box0 {
    width: 100px;
    height: 100px;
    background-color: brown;
    float: left;
}
.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
    float:right;
}

</style>
</head>
<body>
<div class="box">
<div class="box0">Box 0</div>   
<div class="box1">Box1</div>
</div>
</body>
</html>
Ramki
  • 519
  • 2
  • 9
  • can you please explain what is the problem with the initial html in the question? – Jinto May 12 '14 at 07:32
  • first partitioning the div.main div in that two divs left and right this is right format to write the code – Ramki May 12 '14 at 07:35
0

It's because DIV's are by default, Blocks elements.. so even if you give a float propertie to first div, the second one still have the default display attribute.

So, add display: inline-block to the second block and there you go.

jsFiddle update: http://jsfiddle.net/xR9Rd/4/

.box1 {
    display: inline-block;
}
gmo
  • 8,860
  • 3
  • 40
  • 51
0

You don't have to use float anymore , just display the two divs as inline-block and reduce a little bit the width of each div

<div class="box0">Box 0</div>   
<div class="box1">Box1</div>

.box0 {
 width: 100px;
 height: 100px;
 background-color: brown;
 display:inline-block;
 vertical-align:top;
 }
 .box1 {
 width: 100px;
 height: 100px;
 background-color: red;
 display:inline-block;
 vertical-align:top;
 }
MCHAppy
  • 1,012
  • 9
  • 15
  • Please do not delete and repost answers verbatim just because they were downvoted. This is considered an abuse of the system, not to mention it could get downvoted again. – BoltClock May 12 '14 at 07:38
  • my answer is downvoted because i voted up for it , so i am sorry – MCHAppy May 12 '14 at 07:40
  • What are you talking about? You can't vote on your own answers. If your answer was downvoted that means somebody else downvoted your answer. – BoltClock May 12 '14 at 07:41
  • because when somebody vote up his answer , stack overflow downvoted it and i am sorry again because i voted up my previous answer – MCHAppy May 12 '14 at 07:44
  • But **you can't vote on your own answers**. The system will not downvote your answer just because you tried upvoting it, all it does is give you an error. Like I said, somebody else chose to downvote your answer. It was not the system. – BoltClock May 12 '14 at 07:46
  • Anyway , i am so sorry – MCHAppy May 12 '14 at 07:49