I would like to use HTML, CSS and DIVs to create a 3-row layout similar to the one shown here.
Specifically, I want to include a signin-box with a fixed width in the top right of the first row.
This is what I have tried:
<div id="container">
<div id="top">
<div id="header"></div>
<div id="signin"></div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
body {
margin:0;
padding:0;
}
div#top {
position:fixed;
width:100%;
height:65px;
z-index:100;
background-color:#AAA;
}
div#header {
width:100%;
height:65px;
background-color:#F00;
float:left;
}
div#signin {
width:100px;
height:65px;
background-color:#0F0;
float:right;
}
div#footer {
width:100%;
height:65px;
position:fixed;
bottom:0;
background-color:#06F;
}
div#content {
background-color:#111;
width:100%;
height:100%;
position:absolute;
}
Unfortunately, the login box ends up below the first row instead; you can see it here.
Any suggestions on how I can properly position the login box to the right of the first row? Thank you in advance!