tags:

views:

48

answers:

1

I have a basic layout that is one Div container wrapper and three columns Divs inside. I want the left and right column to be of fixed with, with the middle one being dynamic to fit it's open space.

Here's a picture to demonstrate what it looks like now: alt text

The red border is the container, and the blue border div is the one I want to expand to stretch as wide as it can so the yellow div is always almost touching the right border of the parent.

Thanks!

#body
{
    border: 1px solid red;
    min-height:800px;
    width:auto;
    margin-left:50px;
    margin-right:50px;    
}

#leftnavigation
{
    border: 1px solid green;
    min-height:500px;
    float:left;
    width:190px;
}

#contentarea
{
    border:1px solid blue;
    min-height:500px;
    float:left;
    width:auto;
    margin-left:5px;
    margin-right:5px;
}

#advertisingarea
{
    border:1px solid orange;
    width:150px;
    float:left;
    min-height:500px;
}

.advert
{

}

<div id="body">
        <div id="leftnavigation"></div>
        <div id="contentarea">sdfg<h1>asdasd</h1></div>
        <div id="advertisingarea">
            <div class="advert">
                <img src="../../Content/images/advertImage.png" alt="Advert" />
            </div>

            <div class="advert">
                <img src="../../Content/images/advertImage.png" alt="Advert" />
            </div>

            <div class="advert">
                <img src="../../Content/images/advertImage.png" alt="Advert" />
            </div>
        </div>
    </div>
A: 

There are quite a few:

http://www.codeproject.com/KB/HTML/relatively_simple.aspx

http://www.tjkdesign.com/articles/3cols.asp

http://www.alistapart.com/articles/holygrail

http://stackoverflow.com/questions/1000691/3-columns-layout-via-divs-middle-flexible-all-flexible-height-strict-mode

Moin Zaman
Woah woah woah - this use case is the "Holy Grail" of CSS? I'm just a CSS intermediate guy, not even that good with it yet, should I persue this or just give the middle div a fixed height?
Serg
I say copy the layout that is closest to what you're after. Then tweak to completion.
Moin Zaman