Menu
I’m just playing around with some CSS – a little bit more difficult than what I expected.
Anyway, I’m just creating a fixed layout webpage and I have a left sidebar (I didn’t float this but is in the natural flow) but my main content – I would like to have it right next to my sidebar. My main content does float to the right – but the problem is, it doesn’t come up right underneath the menu. The top of the main content comes up to the bottom of my left sidebar. I know I’m missing something – not sure what it is.
Here is my code:
<html>
<head>
<style>
.container {
width: 1020px;
margin: 0px auto;
}
.header {
background-color: #000;
height: 100px;
width: 1020px;
color: white;
margin-top: 20px;
border-radius: 5px;
}
.menu {
background-color: grey;
height: 40px;
color: purple;
}
.leftsidebar {
background-color: blue;
height: 650px;
width: 100px;
}
.main {
float: right;
width: 920px;
height: 650px;
background-color: red;
}
</style>
<body>
<div class=”container”>
<div class=”header”>
</div>
<div class=”menu”>
</div>
<div class =”leftsidebar”>
</div>
<div class=”main”>
</div>
</div>
</body>
</html>