Column width issue

[bangoruniversity]

Hello

My working example page layout to start with.

The page has two columns (ignoring the left hand navigation) and what I would like to see happening is the main text column (centercolumn) increase its width to the edge of the available space if the other div (rightcolumn) is not included in the code.

Should I then decide to include the 'rightcolumn' div in the code it would revert to how it is currently displayed.

Ive hit the wall here so need some help - what a marathon!

cheers
Chris

[ParkinT]

Did you try setting width:auto on the 'centercolumn' ?

[Paul O'B]

Hi,

You'll have to move the right column up the html to do this and then remove the float and the width from the center column. Then you need to add overflow:auto which will make the center column avoid the floats in a rectangular box and not wrap under them. Ie needs a helping hand width a "haslayout" hack.

Change the cenrcontent code to this:

/* centercolumn */

#centercolumn
{
background-color : #FFFFFF;
margin : 15px 0px 0px 15px;
padding : 0px 0px 18px 0px;
border-bottom : 1px solid #C1C1C1;
overflow:auto;
}
* html #centercolumn{height:1%}

Then adjust the html:

    <!-- close sitenavigation -->
    <div id="contentwrapper">
        <div id="rightcolumn">
            <!-- open rightcolumn -->
            <div id="featurelinkone">
                <!-- open featurelinkone -->
                <img src="images/featurelink.jpg" alt=" " width="140" height="100"/ >
                <h3><a href="#">Feature Link on two lines</a></h3>
            </div>
            <!-- close featurelinkone -->
            <div id="featurelinktwo">
                <!-- open featurelinktwo -->
                <img src="images/featurelink.jpg" alt=" " width="140" height="100"/ >
                <h3><a href="#">Feature Link on two lines</a></h3>
            </div>
            <!-- close featurelinktwo -->
            <div id="featurelinkthree">
                <!-- open featurelinkthree -->
                <img src="images/featurelink.jpg" alt=" " width="140" height="100"/ >
                <h3><a href="#">Feature Link on two lines</a></h3>
            </div>
            <!-- close featurelinkthree -->
        </div>
        <!-- close rightcolumn -->
        <!-- open contentwrapper -->
        <div id="centercolumn">
            <!-- open centercolumn -->
            <h2>Introduction</h2>

When the right column is missing the center column will be full width. When the column is present the center column moves out of the way to make room. Make sure that your content is never wider than the available space or you will get scrollbars.

Here's an old demo that shows how it works.

http://www.pmob.co.uk/temp/3col-overflow-toggle.htm

[bangoruniversity]

Thank you all for replying. I was beggining to think it wasnt possible and would have to revert to using multiple templates/css id's. Shame about the re-ordering of the div elements, but its still a good solution!

thanks again
C