Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Location
    Evansville, IN
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    3 column layout: floats in center column

    I'm currently in the process of a complete website redesign for my employer. A co-worker created the template in Photoshop, and I went about recreating it in XHTML w/CSS. However, we've come across a few problems as we've added content, and I've been able to fix them all except for this one.

    First of all, for our template we wanted a 3-column layout, the left and right columns are fixed-width (in pixels). The center column, where the content goes, expands with the browser width. I tried several examples found on the web, but went with http://www.codeproject.com/KB/HTML/r...ly_simple.aspx and made my own edits.

    Both the left column (used for submenu items) and the right column (used for various widgets) are floated appropriately. The middle column is placed beneath the other columns in my HTML so it fits between.

    However, on some pages I want two columns of info in the center column. I've wrapped each content block in a div, set display to block, appropriate width, and floated the div left/right. After the two divs, I've added an empty paragraph with the clear CSS property set to "both". I then list my next two divs, float them appropriately, rinse & repeat. In Internet Explorer 7, this produces the clean look I planned on.

    However, in any other browser, the empty paragraph with "clear: both" clears the content in the left and right columns instead of the content in the center column! This is difficult to explain, so please refer to the following links:

    Color-coded screenshot from IE7 (correct layout!): http://www.joshuapweiland.com/evpl/trouble-ie.jpg
    Color-coded screenshot from Firefox 2.0 (incorrect!): http://www.joshuapweiland.com/evpl/trouble-ff.jpg

    I've also set up a demo page you can preview in your browser to view the source. It's at http://www.joshuapweiland.com/evpl/index.html. Test it in IE and FF and you'll see what I mean. The CSS file is at http://www.joshuapweiland.com/evpl/css/main.v3.css.

    I'd greatly appreciate any help I can get! I'm assuming that IE is actually at fault, but it's displaying it as I intended!!!

    Thanks in advance,
    Josh

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I presume your content is lower down in the code than the two columns?
    What I'd do is have a nice little wrapper div which automatically clears.
    Code:
    <div>
        <div class="left">
            <h2>Pearl's Picks</h2>
            <p>I <em>really</em> am not gonna type this out. You get the point.
        </div>
        <div class="right">
            <h2>National Book Awards</h2>
            <p><strong>I'm not kidding.</strong></p>
        </div>
    </div>
    <!-- and so on -->

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Location
    Evansville, IN
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by CyanLight View Post
    I presume your content is lower down in the code than the two columns?
    What I'd do is have a nice little wrapper div which automatically clears.
    Code:
    <div>
        <div class="left">
            <h2>Pearl's Picks</h2>
            <p>I <em>really</em> am not gonna type this out. You get the point.
        </div>
        <div class="right">
            <h2>National Book Awards</h2>
            <p><strong>I'm not kidding.</strong></p>
        </div>
    </div>
    <!-- and so on -->
    Thanks for the suggestion! Unfortunately, I couldn't get it to work. If I remove the clearing paragraphs and wrap a left chunk and right chunk together in a wrapper div, the contained divs get jumbled up.

    I'm not sure what you meant by "automatically clears". I also tried setting the wrapper div "display: block", hoping it would push the next wrapper div below it, but it didn't. If I set the wrapper divs to "clear: both", then they're all displayed below the right column content in FF.

    So anytime I use the "clear" css property on an item in the center column, in browsers other than IE it clears past the content in the left and right columns, instead of just the content in the center column. Any other ideas?

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I got it, you just needed to float. Have a look.
    Code:
    <!DOCTYPE html>
    <html lang="en">
        <head>
           <title>Wrappers</title>
           <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    .wrap {
        float: left;
        width: 100&#37;;
        font: 0.9em/1.8 "Lucida Sans Unicode";
        color: #fff;
        margin-bottom: 1em;
    }
    .wrap .left {
        float: left;
        width: 50%;
        background: #06c;
    }
    .wrap .right {
        float: right;
        width: 50%;
        background: #39f;
    }
    p.wrap {
        color: #333;
    }
            </style>
        </head>
        <body>
            <div class="wrap">
                <div class="left">
                    <h2>Pearl's Picks</h2>
                    <p>I <em>really</em> am not gonna type this out. You get the point.</p>
                    <p>Lorem ipsum dolor sit bloody amet. La la la la la la.</p>
                    <p>I'd like a pearl, actually.</p>
                </div>
                <div class="right">
                    <h2>National Book Awards</h2>
                    <p><strong>I'm not kidding.</strong></p>
                </div>
            </div>
            <div class="wrap">
                <div class="left">
                    <h2>Pearl's Picks</h2>
                    <p>I <em>really</em> am not gonna type this out. You get the point.</p>
                    <ul>
                        <li>Fluffballs</li>
                        <li>And cheese</li>
                        <li>Are awesome.</li>
                    </ul>
                </div>
                <div class="right">
                    <h2>National Book Awards</h2>
                    <p><strong>I'm not kidding.</strong></p>
                </div>
            </div>
            <div class="wrap">
                <div class="left">
                    <h2>Pearl's Picks</h2>
                    <p>I <em>really</em> am not gonna type this out. You get the point.</p>
                </div>
                <div class="right">
                    <h2>National Book Awards</h2>
                    <p><strong>I'm not kidding.</strong></p>
                    <ol>
                        <li lang="fr">Voulez-vous couchez avec moi ce soir?</li>
                        <li lang="fr">Oui, je veux coucher avec toi...</li>
                    </ol>
                </div>
            </div>
            <p class="wrap">And here's some &lsquo;cleared&rsquo; content to please you...</p>
        </body>
    </html>

  • Users who have thanked Apostropartheid for this post:

    jpw21683 (01-22-2008)

  • #5
    New to the CF scene
    Join Date
    Jan 2008
    Location
    Evansville, IN
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much...that did the trick! Just gotta fine-tune some margins and I'll be good to go.


  •  

    Posting Permissions

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