SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    California
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS guru needed . . . vertical DIV positioning problem in 2-column liquid layout

    Good morning CSS gurus . . .

    This simple 2-column liquid layout (CSS and XHTML below) displays consistently across IE 5 Mac, Opera 6 Mac, Netscape 7 Win, Mozilla 1.5 Win.

    But in IE 6 Win (my target browser, and also Opera 7 Win) the second column DIV shifts down so that the text in that column doesn't line up vertically with the text in column one. Haven't tested in IE 5 Win, but I suspect problems there too.

    Is there a fix or additional code needed for IE 5/6 Win and Opera 7 Win?


    ====== START CSS ========

    /*** 2-column liquid CSS layout using floats ***/
    /*** BEGIN CSS ***/
    /*** HTML tag styles ***/

    body{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #333333;
    line-height: 140%;
    margin: 0em;
    padding: 0em;
    background-color: #FFFFFF; /* */
    font-size: 76%;
    }

    h1 {
    font-size: 200%;
    }

    ul{
    list-style-type: square;
    }

    ul ul{
    list-style-type: disc;
    }

    /*** Format Classes ***/

    .subhead {
    font-weight: bold;
    color: #000000;
    font-size: 1.4em;
    font-family: Arial, Helvetica, sans-serif;
    }

    /*** Layout Divs ***/

    #masthead{
    padding: 2%;
    background-color: #3399CC;
    }

    #left-column{
    padding: 2%;
    width:20%;
    float: left;
    margin-left: 0px;
    background-color: #FFBEA8;
    }

    #center-column{
    padding: 2% 10%;
    margin-left: 24%;
    border-left-width: 0px;
    border-left-style: dotted;
    border-left-color: #99CC00;
    background-color: #D2D2FF;
    }

    /* Clearing the footer (clear:both;), expands the footer to full width
    and places it immediately under the longest column. */

    #footer{
    clear: both;
    font-size: 100%;
    color: #000000;
    padding: 0px;
    background-color: #77BCDD;
    text-align: center;
    }

    #footer img{
    padding: 0px;
    }
    ====== END CSS ========

    ====== START XHTML ========

    <!-- START HTML -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="generator" content="HTML Tidy, see www.w3.org" />

    <title>3-Column CSS Layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="2-column.3.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <!-- start masthead -->
    <div id="masthead">
    <h1>Masthead</h1>
    <span class="subhead">Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit. Donec molestie. Sed aliquam sem ut arcu.</span>
    </div>
    <!-- start left-column -->
    <div id="left-column">
    <p class="subhead">Column 1</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
    molestie.</p>

    <p>Sed aliquam sem ut arcu. Phasellus sollicitudin. Lorem ipsum dolor sit
    amet</p>

    <p>onsectetuerorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Lorem
    ipsum dolor sit amet. </p>
    </div>
    <!-- start center-column -->
    <div id="center-column">
    <p class="subhead">Column 2</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
    molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. orem ipsum
    dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam
    sem ut arcu. Phasellus sollicitudin. Lorem ipsum dolor sit amet, consorem
    ipsum dolor sit amet, consectetuer</p>

    <ul>
    <li>llus sollicitudin. orem ipsum dolor sit amet, consectetuer
    adipiscing elit. Donec molestie. Sed aliquam sem ut arcu.</li>

    <li>Phasellus sollicitudin. Lorem ipsum dolor sit amet, consorem ipsum
    dolor sit amet, consectetuer a llus sollicitudin.</li>

    <li>Orem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
    molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin.</li>
    </ul>

    <p>Lorem ipsum dolor sit amet, consorem ipsum dolor sit amet,
    consectetuer allus sollicitudin. orem ipsum dolor sit amet, consectetuer
    adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus
    sollicitudin. Lorem ipsum dolor sit amet, consorem ipsum dolor sit amet,
    consectetuer.</p>
    <p>orem ipsum dolor sit amet, consorem ipsum dolor sit amet, consectetuer allus
    sollicitudin. orem ipsum dolor sit amet, consectetuer adipiscing elit.
    </p>
    </div>
    <!-- start footer -->
    <div id="footer">
    <span class="subhead">Footer</span>
    <br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </div>
    </body>
    </html>


    ====== END XHTML ========
    Last edited by michaelnorth; Nov 16, 2003 at 17:04.

  2. #2
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    That's an IE float bug. The easiest way I've found to prevent this is to enclose the offending block within another block - with a specific set width. Wrap all the contents inside the center-column in a div like so:

    HTML Code:
    <div id="center-column">
    <div style="width: 80%;">
    That should do it!

    -xDev

  3. #3
    SitePoint Member
    Join Date
    Nov 2003
    Location
    California
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    XDev,

    If I set "center-column" width at 55%, it doesn't fill to the right edge of the browser window, leaving an obvious gap. If I set it to 56%, the entire DIV wraps below the first column. We're not quite there yet . . .


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
  •