Menu
I'm trying to implement a simple layout, closely represented like this:
_________________________
| | header | |
| L |_____________| R |
| | | |
| | | |
| | | |
| | main | |
| | | |
| | | |
| | | |
|_____|_____________|_____|
I've developed this code to accomplish my objective:
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<style>
* {
margin: 0px;
padding: 0px;
}
p {
text-align: center;
}
div#left {
float: left;
background-color: #777;
width: 200px;
height: 650px;
}
div#header {
float: left;
background-color: #eee;
width: 940px;
height: 60px;
}
div#main {
float: left;
width: 940px;
}
div#right {
float: right;
background-color: #777;
width: 200px;
height: 650px;
}
</style>
</head>
<body>
<div id="left">
<p>Left</p>
</div>
<div id="header">
<p>Header</p>
</div>
<div id="main">
<p>Main</p>
</div>
<div id="right">
<p>Right</p>
</div>
</body>
But I can't get the 'right' column to stay aligned with the top. Can someone point me what to change in my CSS to correct this? Thanks!
803
Move the right column to the top of your HTML:
<body>
<div id="right">
<p>Right</p>
</div>
<div id="left">
<p>Left</p>
</div>
<div id="header">
<p>Header</p>
</div>
<div id="main">
<p>Main</p>
</div>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
