Question

I have the following code:

<div "background-color:green">
    <div "float:left">something</div>
    <div "float:right:>something else</div>
<div>

Why does the background color not appear in this case? What needs to be done to make it appear
{Code simplified for understanding , may not be in the approporiate syntax}

Answer 1

You need to clear the div. You can use clear: both on an element beneath, but I often find this is easier:

<div style="background-color:green; overflow: hidden;">
    <div style="float:left;">something</div>
    <div style="float:right;">something else</div>
<div>

Notice the overflow: hidden.

Of course, it only works where you don’t require elements to leave their containing elements.