Making 2 divs float:right with one under the other
13,024
Solution 1
I've modified your css:
body {
width: 90%;
margin: auto;
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
background: #e6f0ff;
}
header.beta {
position: absolute;
top: 0;
left: 0;
width: auto;
background: #fff7e0;
opacity: 0.8;
padding: 10px 50px;
color: #444443;
}
header.logo {
width: 90%;
height: 125px;
margin: auto;
margin-top: 60px;
margin-bottom: 30px;
border: 1px dotted grey;
}
nav.tabs {
display: none;
}
div.presentation, div.login, div.categories {
position: relative;
margin-top: 10px;
display: inline-block;
}
div.right {
position: relative;
float: right;
width: 25%;
}
div.presentation {
width: 70%;
clear: both;
}
div.login, div.categories {
width: 100%;
clear: both;
}
div.login header, div.presentation header, div.categories header {
font-size: 14px;
background: #0a97e2;
padding: 3px 15px;
color: white;
border-radius: 10px 10px 0 0;
}
div.login section, div.presentation section, div.categories section {
/*position: absolute;*/
width: 100%;
background: white;
border-radius: 0 0 5px 5px;
}
div.login section p, div.presentation section p {
/* changed this */
margin: 0px 10px;
padding: 3px 10px 3px 10px;
}
div.login section input {
display: block;
margin: auto;
margin-bottom: 10px;
}
/* added this */
div.categories ul {
margin: 0px 10px;
padding: 3px 10px 3px 10px;
}
Solution 2
HTML
<div class="left">
<div class="presentation"></div>
</div>
<div class="right">
<div class="login"></div>
<div class="categories"></div>
</div>
CSS
.left {
float: left;
}
.right {
float: right;
}
Solution 3
<div style="width:430px; height:430px; border:1px solid;">
<div style="width:230px; height:100%; float:left; background:#000;"></div>
<div style="width:180px; float:right; height:150px; border:1px solid; margin-top:20px; margin-right:10px;"></div>
<div style="width:180px; float:right; height:150px; margin-top:20px; margin-right:10px; border:1px solid;"></div
</div>
Try this one
![Jason Pierna](https://i.stack.imgur.com/AmuHY.jpg?s=256&g=1)
Author by
Jason Pierna
Updated on August 03, 2022Comments
-
Jason Pierna almost 2 years
I don't know how to better express my title so I'll explain here. I got a HTML/CSS page with 3 divs.
The first one,
div.presentation
, has no floating rule. I want to make menus at its right.So I got two others divs,
div.login
anddiv.categories
. They both havefloat: right;
andclear: both;
.I want something like that :
-------------------------------------- ------------------ |div.presentation | |div.login | | | | | | | | | | | | | | | ------------------ | | | | ------------------ | | |div.categories | | | | | | | | | | | | | -------------------------------------- ------------------
But
div.login
anddiv.categories
are aside each other. Floating rules worked perfectly whendiv.categories
did not exist.I have what I want when I put a
<div style="height:100px"></div>
betweendiv.login
anddiv.categories
, but I'm sure we can do better. It's too based on luck.Those 3 divs are
display:inline-block
.Any idea ? Thanks a lot.