Question

say for example i have 2 div in a div like this

<div style="width: 300px; backround-color: #000000;">
    <div style="height: 300px; width: 150px; float: left; background-color: #00ff00; color: #ffffff;">This is left</div>
    <div style="float: right; width: 150px; background-color: #ff0000; color: ##ffffff;">This is right</div>
</div>

Now my question is why i cant see my background black color below ref if green div is 300 pixels in height.

Answer 1

The text flow is “killed” if you use float: ...;

What you can do is to say where the text flow should be after the elements with the float attribute with the “clear” attribute.

You can do:

<div style="width: 300px; backround-color: #000000;">
    <div style="height: 300px; width: 150px; float: left; background-color: #00ff00; color: #ffffff;">This is left</div>
    <div style="float: right; width: 150px; background-color: #ff0000; color: ##ffffff;">This is right</div>
    <div style="clear: both;"></div>
</div>