CSS HTML layout help

Well, I am fairly new to this CSS HTML designing thing and I have a problem in my right sidebar.

I am trying to create a sidebar that looks like this

--------
| r1 |
--------
| r2 | r3|
--------
| r4 |
--------

Here is my CSS for the right sidebar:


#right {
position: absolute;
top: 0;
left: 701px;
width: 300px;
color: white;
margin: 0 auto;
padding: 0;
border: 1px solid #bcbcbc;
text-align: left;
}
#r1{
top: 0;
width: 300px;
color: white;
padding: 0;
text-align: left;
background-color: #006699;
}
#r2 {
position: absolute;
left: 0px;
width: 150px;
background-color: #FF0066;
color: white;
margin: 0 auto;
}
#r3{
position: absolute;
left: 151px;
width: 150px;
background-color: #4E4E4E;
color: white;
margin: 0 auto;
padding: 0;
}
#r4 {
width: 300px;
background-color: #4E4E4E;
color: white;
padding: 0;
border: 1px solid #bcbcbc;
text-align: left;
}

I know r4 is totally wrong in this anyways here is my html

<div id="right">
<div id="r1"> Right one</div>
<div id="r2">
line1<br />line2
</div>
<div id="r3">
line1
</div>
<div id="r4">line 1<br />
line 1<br />
line 1<br />
</div>
</div>

Now the problem is that I cannot position the r4 exactly below the r2 and r3. The height of the r2 and r3 varies according to their content. I can only position the r4 below r1.

Please help me out.

[edited by: tedster at 4:48 pm (utc) on Feb 6, 2010]
[edit reason] no urls, please [/edit]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="language" content="english"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> #right { /*position: absolute;*/ /*top: 0;*/ /*left: 701px;*/ width: 300px; color: white; margin: 0 auto; /*padding: 0;*/ border: 1px solid #bcbcbc; /*text-align: left;*/ } #r1{ /*top: 0;*/ width: 300px; /*color: white;*/ /*padding: 0;*/ /*text-align: left;*/ /*background-color: #006699;*/ background-color:#069; } #r2 {[blue] float:left;[/blue] /*position: absolute;*/ /*left: 0px;*/ width: 150px; /*background-color: #FF0066;*/ background-color:#f06; /*color: white;*/ /*margin: 0 auto;*/ } #r3{[blue] float:left;[/blue] /*position: absolute;*/ /*left: 151px;*/ width: 150px; background-color: #4e4e4e; /*color: white;*/ /*margin: 0 auto;*/ /*padding: 0;*/ } #r4 {[blue] clear:both;[/blue] width: 300px; background-color: #4e4e4e; /*color: white;*/ /*padding: 0;*/ border: 1px solid #bcbcbc; /*text-align: left;*/ } </style> </head> <body> <div id="right"> <div id="r1"> Right one</div> <div id="r2">line1<br>line2</div> <div id="r3">line1</div> <div id="r4">line 1<br>line 1<br>line 1<br></div> </div> </body> </html>

CSS HTML layout help

I am really stuck on this css layout

ashish2005

birdbrain

ashish2005

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week