Two Div On The Top, One Div On The Bottom

August 25, 2022 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:

<div id="one"></div><div id="two"></div>
<div class="clear"></div>
<div id="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>
    <div id="container">
        <div class="fl">FLOAT LEFT 1</div>
        <div class="fl">FLOAT LEFT 2</div>
        <div style="clear:both;"></div>
        <div id="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/

Baca Juga

Good luck :)

Solution 5:

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

Html5 stackoverflow Examples