Floated heading

Heading element shifts the red div elements though its floated. Because the elements remember the existence, as the default positioning(static) causes following elements to remember that

by prasun_sultania

HTML

<fieldset id="favoriteColor">
    <div class="h2">
    <h2>Favorite Color:</h2>
    </div>
    <div class="col">
        <div>
            <label><input class="checkbox" id="red" name="red" type="checkbox" value="red" />red</label>
            <label><input class="checkbox" id="green" name="green" type="checkbox" value="green" />green</label>
        </div>
    </div>

    <div class="col">
        <div>
            <label><input class="checkbox" id="orange" name="orange" type="checkbox" value="orange" />orange</label>
        </div>
    </div>    
</fieldset>

CSS

/* make bckgnd transparent - reset fieldset default style*/
fieldset#favoriteColor {
margin: 0;
padding: 0;
border: none;
background: transparent;
    /*clear:none;*/
}
.h2{
    float: left;
}

#favoriteColor h2 {
background-color: green;
width: 10em;
/*float: left;*/
font-size: 1em;
font-weight: normal;
    
}

.col{
    background-color: red;
}
}