Question

I have a problem that I thought was pretty simple but that is taking me a lot of time to solve it. If there is a simple solution (and I don’t know CSS enough), please point me there and I’ll close this question immediately.

My problem is the following.

I have 6 divs one on top of another, something like:

<div id="header">header content</div>
<div id="sidebar1">sidebar1 content</div>
<div id="maincontent">maincontent content</div>
<div id="maincontent2">maincontent2 content</div>
<div id="sidebar2">sidebar2 content</div>
<div id="footer">footer content</div>

What I want to have is something like:

-----------------------------------------------------------
| header content                                          |
-----------------------------------------------------------
--------------------------------------  -------------------
| maincontent content                |  | sidebar1 content|
|                                    |  -------------------
|                                    |  -------------------
|                                    |  | sidebar2 content|
|                                    |  -------------------
--------------------------------------
--------------------------------------
| maincontent2content                |
|                                    |
|                                    |
|                                    |
|                                    |
--------------------------------------
-----------------------------------------------------------
| footer content                                          |
-----------------------------------------------------------

In other words, is there a way to create a right column even if the divs are not one after another using only CSS and without moving the divs in the code?

I tried to use for sidebar1 the following css

 position:absolute;
 top:3em;
 right:0;

and for sidebar2 the following css

 position:absolute;
 top:9.5em;
 right:0;

but I have the impression that this is not the right way to do it.

A simple way could be to define the top attribute size as a function of the height of heather, but I couldn’t find any way to do it only with CSS.

Thanks!

Answer 1

Well… as a direct answer to your question, you can use a combination of floats and % widths to accomplish this. You can also use fixed widths, but you’ll have to determine what those sizes are. Here’s a simple implementation:

Demo

---

CSS

#maincontent
{
    float:left;
    width:70%;
    background:#ee5;
}

#sidebar2,#sidebar1
{
    float:right;
    width:30%;
    background:#5e5;
}

#footer
{
    clear:both;
    background:#5ee;
}

#header
{
    background:#55e;
}

HTML

<div id="header">header content</div>
<div id="sidebar1" class="side">sidebar1 content</div>
<div id="maincontent">maincontent content</div>
<div id="sidebar2" class="side">sidebar2 content</div>
<div id="footer">footer content</div>