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
and div.categories
. They both have float: right;
and clear: both;
.
I want something like that :
-------------------------------------- ------------------
|div.presentation | |div.login |
| | | |
| | | |
| | | |
| | ------------------
| |
| | ------------------
| | |div.categories |
| | | |
| | | |
| | | |
-------------------------------------- ------------------
But div.login
and div.categories
are aside each other. Floating rules worked perfectly when div.categories
did not exist.
I have what I want when I put a <div style="height:100px"></div>
between div.login
and div.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.
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;
}