CODEWITHSUNDEEP
htmlcss
Ortomala Lokni
Ortomala Lokni

Reputation: 62535

Why the text appears outside it's container?

HTML

<div id="div1"></div>
<div id="div2">Outside div</div>

CSS

div{
   width   : 100px;
   height  : 100px;
}
#div1{
   background-color  : lightblue;
   float             : left;
}
#div2{
    background-color : blue; 
}

I've two <div> with fixed size. One is float:left and the other is not. Both <div>'s are displayed at the same position. But the text inside the second <div> appear outside its <div> container. Why?

If I put overflow:auto on #div2 the second <div> appears at a different position next to the first one. I don't understand what happens here.

http://jsfiddle.net/c86LS/

Upvotes: 0

Views: 2333

Answers (4)

Alohci
Alohci

Reputation: 82986

In the first case, div1 and div2 cover the same space. The line box with the text in must avoid the float, so since the overflow on div2 is the default "visible", the text flow continues as if the div2 box was taller than it is, displaying below the boxes.

In the second case, setting div2 overflow to "auto" causes div2 to form a new block formatting context. This means that it starts, not at the same place as div1, but next to it, so you see the whole of div1 and div2.

Upvotes: 1

Sami
Sami

Reputation: 1051

Its because you didn't cleared it. when ever you float elements and do not clear it properly it causes issues in heights. the preceding div do not take complete height.

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

You have not assigned any width for the #div1. So that it is occupying the entire width of it parent. Assign some width for the #div1 then the blue container will use the remaining part.

 #div1{
 background-color: lightblue;
 float: left;
 width:50px;
 }

Upvotes: 0

qtgye
qtgye

Reputation: 3610

Use overflow: hidden property for the parent div.

Upvotes: 0

Related Questions