Question

I have three columns on a webpage. One at the left hand side. Other at the center and the last one at the right hand side. I want to shift the right div below the left div (and left div is an expandable div).

But the problem is that the right div and the center div have the same parent div. And the left div and the parent of right and center div have the same parent. This is what I mean to say-

 <container>
     <leftContainer>
         <leftColumn>
     <mainContent>
         <rightColumn>
         <centerColumn>

And I want to shift the <rightColumn> below the <leftColumn>. Is it possible ?

Also since I am working on a custom user stylesheet, I cannot change the code, I can only modify the CSS.

How do I do this ?

Answer 1

If you know the height of the left div, you can float: left each div and then use a negative margin-height on the centerColumn of the height of the left column.

Example: <– click for a demo

<div id="container">
    <div id="left_container">
        <div id="left">left</div>
    </div>
    <div id="right_container">
        <div id="right">right</div>
        <div id="middle">middle</div>
    </div>
</div>

<style type="text/css">
#container {
    width: 160px;
}

#left {
    float: left;
    width: 80px;
    height: 100px;
    background-color: #eee;
}

#right {
    clear: left;
    float: left;
    width: 80px;
    height: 100px;
    background-color: #ccc;
}

#middle {
    float: right;
    width: 80px;
    height: 100px;
    margin-top: -100px;
    background-color: #aaa;
}
</style>