Hey guys need some help on the html and css float stuff. Please check http://jsfiddle.net/anilnamde/DVJ4b/ and and following are the queries i have. Also including code below
.p{
background:red;
width:100%;
padding:20px;
}
.p div{
width:49%;
background:blue;
float:left;
margin-left:5px;
min-height: 200px;
}
</style>
<body>
<div class="p">
<div>
first
</div>
<div>second
</div>
This is the test text
</div>
<p>This is good</p>
</body>
- As per my understanding p tag and text inside parent div should go behind the two floated elements. Which is not happening.
- Again somehow without any clearfix or clear both or overflow hidden parent div’s height is appearing correct. Which is kind of getting difficult to understand.
Can someone help me understand this.
As as per what i was started to understand its standard example to understand float related issue and apply clearfix to fix it. But suddenly i found its started working fine without clearfix. So i am currently kind of not really sure about my float understanding.
The text inside .p is wrapping around the floated divs as it should, but you’ve left no room for it to do so at the sides, so it falls below. The text in the p tag is outside div.p, so it appears below. Again, this is expected. Div.p is a block-level element, so it’s full-width even without you explicitly stating so.
Your parent div expands to wrap the text that has wrapped below the floated divs. This is expected.