Question

I’m currently learning CSS. I’m struggling to to my form elements to be arranged correctly. especially the last element the submitBtn div, here’s my issue :

The floated submitBtn div is not included inside the formContainer div, this is my code (with the spacer div is turned off) :

* {
    margin: 0;
    padding : 0;    
}

li {
    list-style : none;
}

#mainContainer {
    width : 760px;
    margin : 20px auto ;
    background-color : red;
}

#header {
    background-color: blue;
}

#formContainer {
    background-color : green;
}

#textInfo {
    background-color : yellow ;
}

#occupationInfo {
    background-color : purple ;
}

#hobbyInfo {
    background-color : pink ;   
}

#birthdayInfo {
    background-color : brown ;
}

#briefInfo {
    background-color : darkblue;
}

#submitBtn {
    width : 50px;
    float : right;
    clear : both;
    background-color : black ; 
}

/*#spacer {
    clear : both;
}*/

But when i uncomment it it fixes the problem :

Is there any cleaner solution other than adding a spacer div ?

Answer 1

Along with Diego’s solution you can also try adding overflow:auto to formContainer. The reason this happens is because parent elements are never to expand to contain floated elements. A floated element will “overflow” its container.