column layout with css - what am I missing?

Discussion in 'HTML' started by Greg N., Jun 29, 2005.

  1. Greg N.

    Greg N. Guest

    Hi folks,

    Look at the small example at http://coolhaus.de/misc/test5.htm .
    It looks OK at first glance, but when I resize the window to make it
    narrower, the section below the columns overlays the columns.

    The reason is, obviously, that there is a discreet height assigned to
    the columnn part (style="height:100px;").

    But without that discreet height specification, it does not work at all,
    that is, the columns and the stuff below always overlay each other.

    This can't be the correct way to do it. What am I missing?

    Below is the html at http://coolhaus.de/misc/test5.htm :

    <html>
    <style type="text/css">
    BODY { width:60%; }
    .columns { position:relative; width:100%; }
    .col { position:absolute; top:0; height:100%;}

    .c31 { left:0; width:32%; }
    .c32 { left:33%; width:32%; }
    .c33 { left:66%; width:33%; }
    </style>
    <body>
    <h3> this is how I do a 3-column layout</h3>

    <div class="columns" style="height:100px;">
    <div class="col c31">
    this stuff goes to the left column, this stuff goes to the left column,
    </div>

    <div class="col c32">
    here something that goes into column 2! here something that goes into
    column 2!
    </div>

    <div class="col c33">
    This is column 3. This is column 3. This is column 3. This is column 3.
    </div>
    </div>

    <h3>This section should go below the column part</h3>
    This section should go below the column part. But watch what happens
    when you resize the window to make it narrower.
    </html>
    Greg N., Jun 29, 2005
    #1
    1. Advertising

  2. Greg N.

    Els Guest

    Greg N. wrote:

    > Look at the small example at http://coolhaus.de/misc/test5.htm .
    > It looks OK at first glance, but when I resize the window to make it
    > narrower, the section below the columns overlays the columns.
    >
    > The reason is, obviously, that there is a discreet height assigned to
    > the columnn part (style="height:100px;").


    Indeed - don't do that.

    > But without that discreet height specification, it does not work at all,
    > that is, the columns and the stuff below always overlay each other.


    That's because you used position:absolute.

    > This can't be the correct way to do it. What am I missing?


    You are misunderstanding the effect op absolute positioning.

    > Below is the html at http://coolhaus.de/misc/test5.htm :


    <snip>

    > .columns { position:relative; width:100%; }
    > .col { position:absolute; top:0; height:100%;}


    I can only advise you to try and make your page without using any
    'position:absolute;'. Use floats.

    > <h3> this is how I do a 3-column layout</h3>


    Don't do it that way ;-)

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: Spider Murphy Gang - Skandal Im Sperrbezirk
    Els, Jun 29, 2005
    #2
    1. Advertising

  3. Greg N.

    Greg N. Guest

    Els wrote:

    > I can only advise you to try


    I tried a million things :)

    > and make your page without using any
    > 'position:absolute;'. Use floats.


    Can you be a bit more specific?

    Thanks!
    Greg
    Greg N., Jun 29, 2005
    #3
  4. Greg N.

    Els Guest

    Greg N. wrote:

    > Els wrote:
    >
    >> I can only advise you to try

    >
    > I tried a million things :)


    million and one is the answer ;-)

    >> and make your page without using any
    >> 'position:absolute;'. Use floats.

    >
    > Can you be a bit more specific?


    More specific?
    Go through your CSS styles, snip every line that starts with
    'position:'.

    Then look up a nice CSS tutorial or read the specs on "float".
    Then rewrite your styles, but you may not use 'position'. :)

    Of course, a quick (but dirty) way is to look up '3-col CSS layout
    with footer' in Google, and see what comes up, and just copy that.
    The dirty in that, is that it won't help you understand what you're
    doing, whereas a tutorial does.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: Sweet - The Ballroom Blitz
    Els, Jun 29, 2005
    #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:
    712
    clintonG
    Dec 24, 2004
  2. Rob Kirton

    CSS 3 Column layout

    Rob Kirton, Sep 4, 2003, in forum: HTML
    Replies:
    3
    Views:
    761
    Rob Kirton
    Sep 5, 2003
  3. Guybrush Threepwood

    Table-based layout to CSS layout

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

    Css-Layout vs Table-Layout

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

Share This Page