SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Column width issue

    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

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,287
    Mentioned
    182 Post(s)
    Tagged
    4 Thread(s)
    Did you try setting width:auto on the 'centercolumn' ?
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    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:

    Code:
    /* 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:

    Code:
        <!-- 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

  4. #4
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •