CSS 3 Column layout

Discussion in 'HTML' started by Rob Kirton, Sep 4, 2003.

  1. Rob Kirton

    Rob Kirton Guest

    I am a relative newbie to html / CSS. After much reading of all on-line
    resources, especially with respect to both box model and column layouts in
    CSS, I set out to develop a 3 column layout page. The two problems I am now
    facing, are both only experienced when using Internet Expirer 6

    1. The columns behave badly when the page is narrowed (I can almost live
    with that one)
    2. The left column behaves strangely at all times (easy to see)

    The platform is Windows XP and everything works to my satisfaction in
    Mozilla 1.4 and Opera 7.20

    There are already two small issues which have been resolved with respect to
    Internet Exploder, however this one has me stumped. I hope there is another
    *quick fix*. Hopefully somebody can help, firstly by suggesting a fix for
    the Infernal Explorer 6 issue and secondly that things also check out in
    version 5.x also.

    I realise that the smart answer may be to use a proper browser. However I
    must be realistic with respect to the size of the Imbecile Explore
    population. You may gather I've been getting a little hacked off with I.E.
    :0)

    --------------- cut --------------------

    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>CSS layout - 3 columns with Header and Footer</title>

    <style type="text/css">

    body {margin:0em; padding:0em; font-family:sans-serif}
    div {margin:0em; padding:0em}
    p {margin:0em; padding:0em}
    h1 {margin:0em; padding:0em}
    h2 {margin:0em; padding:0.10em; background-color:#000000; color:#ffffff}
    ..wrap {margin:0em; padding:0.00em; color:#000000; background:#cccccc}
    ..header {margin:0em; padding:0.50em; color:#000000; background: #9e9eb7}
    ..footer {margin:0em; padding:0.50em; color:#000000; background: #9e9eb7}
    ..wrap-col {float: left;width:80%}
    ..col-one {float: right;width:75%}
    ..col-two {margin-right:75%}
    ..col-three {margin-left:80%}
    ..box-one {background: #ffffff; padding:0.50em; color:#000000;
    overflow:hidden}
    ..box-two {background: #ccccff; padding:0.50em; color:#000000;
    overflow:hidden}
    ..box-three {background: #ccccff; padding:0.50em; color:#000000;
    overflow:hidden}

    /* Needed for Internet Explorer 6 */
    ..footer {clear:both}

    /* Needed for Internet Explorer 6 */
    ..wrap, .wrap-col, .col-one, .col-two, h2,h1 {position:relative}

    </style>

    </head>

    <body>

    <div class="wrap">

    <div class="header">
    <h1>HEADER</h1>
    </div>

    <div class="wrap-col">

    <div class="col-one">
    <div class="box-one">
    <h2>Subject 3</h2>
    <p>xxxxxxxxxxxxxxxxxx</p>
    </div>
    </div>

    <div class="col-one">
    <div class="box-one">
    <h2>Subject 4</h2>
    <p>xxxxxxxxxxxxxxxxxx</p>
    </div>
    </div>

    <div class="col-two">
    <div class="box-two">
    <h2>Subject 1</h2>
    <p>xxxxxxxxxxxxxxxxxx</p>
    </div>
    </div>

    <div class="col-two">
    <div class="box-two">
    <h2>Subject 2</h2>
    <p>xxxxxxxxxxxxxxxxxx</p>
    </div>
    </div>

    </div>

    <div class="col-three">
    <div class="box-three">
    <h2>Subject 4</h2>
    <p>xxxxxxxxxxxxxxxxxx</p>
    </div>
    </div>

    <div class="col-three">
    <div class="box-three">
    <h2>Subject 5</h2>
    <p>xxxxxxxxxxxxxxxxxx</p>
    </div>
    </div>

    <div class="footer"><h1>FOOTER</h1>

    </div>

    </div>

    </body>
    </html>

    -------------------- cut -------------------

    Thanks (in advance) for any help received

    regards

    - Rob
     
    Rob Kirton, Sep 4, 2003
    #1
    1. Advertising

  2. Rob Kirton

    Headless Guest

    Rob Kirton wrote:

    >I am a relative newbie to html / CSS. After much reading of all on-line
    >resources, especially with respect to both box model and column layouts in
    >CSS, I set out to develop a 3 column layout page. The two problems I am now
    >facing, are both only experienced when using Internet Expirer 6


    Google using your subject line, loads of resources available.


    Headless

    --
    Email and usenet filter list: http://www.headless.dna.ie/usenet.htm
     
    Headless, Sep 5, 2003
    #2
    1. Advertising

  3. Rob Kirton

    SteW Guest

    Simple one for 3 unrelated cols eg, internal nav - main text -
    external links.

    ie5.5 should be ok, better check for 5.0. Don't even try with ns4, use
    stylesheet hiding.


    <html>
    ..
    ..
    <h1><img src="logo.gif" alt="logo replacement">header text, if any</h1>

    <div class="leftcol">blah blah</div>
    <!-- floated left, width in ems -->

    <div class="rightcol">blah blah</div>
    <!-- floated right, width in ems -->

    <div class="main">blah blah</div>
    <!-- no float, no clear, no width specified, margins in ems -->

    <div class="footer">blah blah</div>
    <!-- no float, no clear, no width specified -->
    ..
    ..
    </html>

    main and footer may not need to be enclosed in divs thereby reducing
    clutter. Put colour styling and padding in .leftcol and .rightcol and
    there is no need for box-one etc.

    Ste W
     
    SteW, Sep 5, 2003
    #3
  4. Rob Kirton

    Rob Kirton Guest

    "SteW" <> wrote in message
    news:bj9fn0$db1$...

    <-- snip -->

    > <html>
    > .
    > .
    > <h1><img src="logo.gif" alt="logo replacement">header text, if any</h1>
    >
    > <div class="leftcol">blah blah</div>
    > <!-- floated left, width in ems -->
    >
    > <div class="rightcol">blah blah</div>
    > <!-- floated right, width in ems -->
    >
    > <div class="main">blah blah</div>
    > <!-- no float, no clear, no width specified, margins in ems -->
    >
    > <div class="footer">blah blah</div>
    > <!-- no float, no clear, no width specified -->
    > .
    > .
    > </html>


    Thanks for this, I will give it a spin. I hadn't thought of not including
    header and footer (as stated below) within <div> elements. I was also
    intending to make the style external and hide from NN4. The intention also
    to have the page degrade gacefully for non CSS

    > main and footer may not need to be enclosed in divs thereby reducing
    > clutter. Put colour styling and padding in .leftcol and .rightcol and
    > there is no need for box-one etc.


    I had already got around to that way of thinking this morning , with
    improved results. Mozilla & Opera still behaving well, IE is no longer
    dropping the left column, however is still behaving eccentrically when width
    re-sized. Subject one is disappearing though Subject two remains.

    ---------------- cut --------------

    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>CSS layout - 3 columns with Header and Footer</title>

    <style type="text/css">

    body {margin:0em; padding:0em; font-family:sans-serif}
    div {margin:0em; padding:0em}
    p {margin:0em; padding:0em}
    h1 {margin:0em; padding:0em}
    h2 {margin:0em; padding:0.10em; background-color:#000000; color:#ffffff}
    ..wrap {margin:0em; padding:0.00em; color:#000000; background:#cccccc}
    ..header {margin:0em; padding:0.50em; color:#000000; background: #9e9eb7}
    ..footer {margin:0em; padding:0.50em; color:#000000; background: #9e9eb7}
    ..wrap-col {float: left;width:80%}
    ..col-one {background: #ffffff; padding:0.50em; color:#000000;
    overflow:hidden; float: right;width:75%}
    ..col-two {background: #ccccff; padding:0.50em; color:#000000;
    overflow:hidden; margin-right:75%}
    ..col-three {background: #ccccff; padding:0.50em; color:#000000;
    overflow:hidden; margin-left:80%}

    /* Needed for Internet Explorer 6 */
    ..footer {clear:both}

    /* Needed for Internet Explorer 6 */
    ..wrap, .wrap-col, .col-one, .col-two, h2,h1 {position:relative}

    </style>

    </head>

    <body>

    <div class="wrap">

    <div class="header">
    <h1>HEADER</h1>
    </div>

    <div class="wrap-col">

    <div class="col-one">
    <h2>Subject 3</h2>
    <p>xxxxxxxxxxxxxxxxxx</p>
    <h2>Subject 4</h2>
    <p>xxxxxxxxxxxxxxxxxx</p>
    </div>

    <div class="col-two">
    <h2>Subject 1</h2>
    <p>xxxxxxxxxxxxxxxxxx</p>
    <h2>Subject 2</h2>
    <p>xxxxxxxxxxxxxxxxxx</p>
    </div>

    </div>

    <div class="col-three">
    <h2>Subject 4</h2>
    <p>xxxxxxxxxxxxxxxxxx</p>
    <h2>Subject 5</h2>
    <p>xxxxxxxxxxxxxxxxxx</p>
    </div>

    <div class="footer"><h1>FOOTER</h1>

    </div>

    </div>

    </body>
    </html>

    ---------------- cut -------------

    thanks

    - Rob
     
    Rob Kirton, Sep 5, 2003
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    734
    clintonG
    Dec 24, 2004
  2. Bart van den Burg

    CSS questions, 2 column layout

    Bart van den Burg, Apr 3, 2004, in forum: HTML
    Replies:
    1
    Views:
    341
    Bart van den Burg
    Apr 5, 2004
  3. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    1,014
  4. Replies:
    1
    Views:
    587
    John Timney \(MVP\)
    Jun 19, 2006
  5. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    1,019
    Wÿrm
    Jun 20, 2006
Loading...

Share This Page