Two Div On The Top, One Div On The Bottom

October 07, 2024 Post a Comment

That would look like: #div1 #div2 #div3 I tried to set #div1 and #div2 to float left, but some part of #div3 come to top. What' the problem here?

Solution 1:

<divid="one"></div><divid="two"></div><divclass="clear"></div><divid="three"></div><style>#one {
float:left
}

#two {
float:left
}

.clear {
clear:both;

}


</style>

Solution 2:

This should work for you:

<!DOCTYPE HTML><html><head><title>aaa</title><style>div {
    border: 1px solid red;
}
#container {
    width: 211px;
}
.fl {
    float: left;
}

#bottom {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
}
</style></head><body><divid="container"><divclass="fl">FLOAT LEFT 1</div><divclass="fl">FLOAT LEFT 2</div><divstyle="clear:both;"></div><divid="bottom">Bottom Div</div></div></body></html>

BTW, you can't make your floating div 100%; in width. In that case the first DIV will push the second floating div to the bottom, resulting in 3 divs ontop of eachother.

Solution 3:

#div3 should have clear:both.

Solution 4:

See this solution: http://jsfiddle.net/ZnZRs/1/

Good luck :)

Solution 5:

Make width:100%; for div1, and div2, have I understood the question. Also, if that is the case.

Learn Html5