How do I do this with CSS?

Discussion in 'HTML' started by Neil Marshall, Feb 21, 2004.

  1. I was recently asked how to do this (exactly) with CSS and I just
    couldn't come up with an answer. Does anyone here know?

    http://www.eightlines.com/tech/columns/tablelayout1.html
    http://www.eightlines.com/tech/columns/tablelayout2.html

    As long as the content is smaller then the browser window, the columns
    stretch to fill the available space and then the footer is displayed,
    but as soon as the content gets really long (#2) it creates a scroll bar
    and goes off the screen. Also all 3 columns are the same length (I
    haven't put backgrounds in, but assume there would be... I can't just
    leave all the columns different lengths).

    Does anyone have a solution for this?
    Neil Marshall, Feb 21, 2004
    #1
    1. Advertising

  2. Neil Marshall

    Els Guest

    Neil Marshall wrote:

    > I was recently asked how to do this (exactly) with CSS and I just
    > couldn't come up with an answer. Does anyone here know?
    >
    > http://www.eightlines.com/tech/columns/tablelayout1.html
    > http://www.eightlines.com/tech/columns/tablelayout2.html
    >
    > As long as the content is smaller then the browser window, the columns
    > stretch to fill the available space and then the footer is displayed,
    > but as soon as the content gets really long (#2) it creates a scroll bar
    > and goes off the screen. Also all 3 columns are the same length (I
    > haven't put backgrounds in, but assume there would be... I can't just
    > leave all the columns different lengths).
    >
    > Does anyone have a solution for this?


    Fake it:
    http://www.pixy.cz/blogg/clanky/css-3col-layout/


    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 21, 2004
    #2
    1. Advertising

  3. Neil Marshall

    Richard Guest

    Neil Marshall wrote:

    > I was recently asked how to do this (exactly) with CSS and I just
    > couldn't come up with an answer. Does anyone here know?


    > http://www.eightlines.com/tech/columns/tablelayout1.html
    > http://www.eightlines.com/tech/columns/tablelayout2.html


    > As long as the content is smaller then the browser window, the columns
    > stretch to fill the available space and then the footer is displayed,
    > but as soon as the content gets really long (#2) it creates a scroll bar
    > and goes off the screen. Also all 3 columns are the same length (I
    > haven't put backgrounds in, but assume there would be... I can't just
    > leave all the columns different lengths).


    > Does anyone have a solution for this?


    Easy as 123!
    "Float:left" is necessary! Do not remove it!
    Once removed, you just have another division on top of a division.
    <style type="text/css">
    ..header { height:150px; width:99%; border:solid black; background:blue; }
    ..footer {width:auto; height:150px; background:red; border: solid black; }
    ..column { width: 33%; height:100px; border:solid white; background:pink;
    float: left;}
    </style>

    </HEAD>
    <BODY>
    <div class="header">text</div>
    <div class="column">column 1</div>
    <div class="column">column 2</div>
    <div class="column">column 3</div>
    <br style="clear:left;"> ...................... <<<<<<< this says to end the
    float
    <div class="footer">text</div>
    </BODY>
    </HTML>

    What's so difficult to understand?
    Richard, Feb 21, 2004
    #3
  4. Neil Marshall

    A Hess Guest

    Somewhere around 2/21/04 1:36 PM, Els typed wildly with reckless abandon:

    > http://www.pixy.cz/blogg/clanky/css-3col-layout/
    >
    >


    That's really handy, but I have a question. Why are all the divs doubled
    up?

    example:
    <div id="middle"><div class="column-in">
    <h4>Middle Col</h4>
    <p id="mccont">
    This is content of the MIDDLE column.
    </p>
    </div></div>

    Just curious, Aron.

    --
    Time is the best teacher; unfortunately, it kills all its students.
    A Hess, Feb 21, 2004
    #4
  5. Neil Marshall

    Els Guest

    A Hess wrote:

    > Somewhere around 2/21/04 1:36 PM, Els typed wildly with reckless abandon:
    >
    >> http://www.pixy.cz/blogg/clanky/css-3col-layout/
    >>
    >>

    >
    > That's really handy, but I have a question. Why are all the divs doubled
    > up?
    >
    > example:
    > <div id="middle"><div class="column-in">
    > <h4>Middle Col</h4>
    > <p id="mccont">
    > This is content of the MIDDLE column.
    > </p>
    > </div></div>
    >
    > Just curious, Aron.


    I think he (she?) did that just to make it easier to style
    the paddings and margins on the text inside the divs.
    As a style for div.column-in he defines nothing more than
    margin:0; padding:0.5em 1em;, so I think it's just that, really.

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 21, 2004
    #5
  6. Neil Marshall

    A Hess Guest

    Somewhere around 2/21/04 2:42 PM, Els typed wildly with reckless abandon:

    > A Hess wrote:
    >
    >> Somewhere around 2/21/04 1:36 PM, Els typed wildly with reckless abandon:
    >>
    >>> http://www.pixy.cz/blogg/clanky/css-3col-layout/
    >>>
    >>>

    >>
    >> That's really handy, but I have a question. Why are all the divs
    >> doubled up?
    >>
    >> example:
    >> <div id="middle"><div class="column-in">
    >> <h4>Middle Col</h4>
    >> <p id="mccont">
    >> This is content of the MIDDLE column.
    >> </p>
    >> </div></div>
    >>
    >> Just curious, Aron.

    >
    >
    > I think he (she?) did that just to make it easier to style the paddings
    > and margins on the text inside the divs.
    > As a style for div.column-in he defines nothing more than margin:0;
    > padding:0.5em 1em;, so I think it's just that, really.
    >


    Yeah, I've been playing around with it and one div at a time is just
    fine. I love learning new stuff. Later, Aron

    --
    Hard work never killed anyone, but why give it a chance?
    A Hess, Feb 21, 2004
    #6
  7. Els wrote:

    > Neil Marshall wrote:
    >
    >> I was recently asked how to do this (exactly) with CSS and I just
    >> couldn't come up with an answer. Does anyone here know?
    >>
    >> http://www.eightlines.com/tech/columns/tablelayout1.html
    >> http://www.eightlines.com/tech/columns/tablelayout2.html
    >>
    >> As long as the content is smaller then the browser window, the
    >> columns stretch to fill the available space and then the footer is
    >> displayed, but as soon as the content gets really long (#2) it
    >> creates a scroll bar and goes off the screen. Also all 3 columns are
    >> the same length (I haven't put backgrounds in, but assume there would
    >> be... I can't just leave all the columns different lengths).
    >>
    >> Does anyone have a solution for this?

    >
    >
    > Fake it:
    > http://www.pixy.cz/blogg/clanky/css-3col-layout/
    >
    >

    It's not the same. The height doesn't resize to fit the browser window.
    Neil Marshall, Feb 21, 2004
    #7
  8. Richard wrote:

    > Neil Marshall wrote:
    >
    > > I was recently asked how to do this (exactly) with CSS and I just
    > > couldn't come up with an answer. Does anyone here know?

    >
    > > http://www.eightlines.com/tech/columns/tablelayout1.html
    > > http://www.eightlines.com/tech/columns/tablelayout2.html

    >
    > > As long as the content is smaller then the browser window, the columns
    > > stretch to fill the available space and then the footer is displayed,
    > > but as soon as the content gets really long (#2) it creates a scroll bar
    > > and goes off the screen. Also all 3 columns are the same length (I
    > > haven't put backgrounds in, but assume there would be... I can't just
    > > leave all the columns different lengths).

    >
    > > Does anyone have a solution for this?

    >
    >Easy as 123!
    >"Float:left" is necessary! Do not remove it!
    >Once removed, you just have another division on top of a division.
    ><style type="text/css">
    >.header { height:150px; width:99%; border:solid black; background:blue; }
    >.footer {width:auto; height:150px; background:red; border: solid black; }
    >.column { width: 33%; height:100px; border:solid white; background:pink;
    >float: left;}
    ></style>
    >
    ></HEAD>
    ><BODY>
    ><div class="header">text</div>
    ><div class="column">column 1</div>
    ><div class="column">column 2</div>
    ><div class="column">column 3</div>
    ><br style="clear:left;"> ...................... <<<<<<< this says to end the
    >float
    ><div class="footer">text</div>
    ></BODY>
    ></HTML>
    >
    >What's so difficult to understand?
    >
    >
    >
    >
    >

    Where does the height resize to the size of the browser window in that
    example?
    Neil Marshall, Feb 22, 2004
    #8
  9. Els wrote:

    > Neil Marshall wrote:
    >
    >> I was recently asked how to do this (exactly) with CSS and I just
    >> couldn't come up with an answer. Does anyone here know?
    >>
    >> http://www.eightlines.com/tech/columns/tablelayout1.html
    >> http://www.eightlines.com/tech/columns/tablelayout2.html
    >>
    >> As long as the content is smaller then the browser window, the
    >> columns stretch to fill the available space and then the footer is
    >> displayed, but as soon as the content gets really long (#2) it
    >> creates a scroll bar and goes off the screen. Also all 3 columns are
    >> the same length (I haven't put backgrounds in, but assume there would
    >> be... I can't just leave all the columns different lengths).
    >>
    >> Does anyone have a solution for this?

    >
    >
    > Fake it:
    > http://www.pixy.cz/blogg/clanky/css-3col-layout/
    >
    >

    The height on that doesn't resize to the bottom of the browser window
    when the content is smaller then the space available.
    Neil Marshall, Feb 22, 2004
    #9
  10. Richard wrote:

    > Neil Marshall wrote:
    >
    > > I was recently asked how to do this (exactly) with CSS and I just
    > > couldn't come up with an answer. Does anyone here know?

    >
    > > http://www.eightlines.com/tech/columns/tablelayout1.html
    > > http://www.eightlines.com/tech/columns/tablelayout2.html

    >
    > > As long as the content is smaller then the browser window, the columns
    > > stretch to fill the available space and then the footer is displayed,
    > > but as soon as the content gets really long (#2) it creates a scroll bar
    > > and goes off the screen. Also all 3 columns are the same length (I
    > > haven't put backgrounds in, but assume there would be... I can't just
    > > leave all the columns different lengths).

    >
    > > Does anyone have a solution for this?

    >
    >Easy as 123!
    >"Float:left" is necessary! Do not remove it!
    >Once removed, you just have another division on top of a division.
    ><style type="text/css">
    >.header { height:150px; width:99%; border:solid black; background:blue; }
    >.footer {width:auto; height:150px; background:red; border: solid black; }
    >.column { width: 33%; height:100px; border:solid white; background:pink;
    >float: left;}
    ></style>
    >
    ></HEAD>
    ><BODY>
    ><div class="header">text</div>
    ><div class="column">column 1</div>
    ><div class="column">column 2</div>
    ><div class="column">column 3</div>
    ><br style="clear:left;"> ...................... <<<<<<< this says to end the
    >float
    ><div class="footer">text</div>
    ></BODY>
    ></HTML>
    >
    >What's so difficult to understand?
    >
    >
    >

    That code doesn't do what I asked. I also want the height to fill up
    the height of the browser window when the content is less then the size
    of the browser (See example 1). When the content is longer then the
    space available I want it to scroll like a normal page (See example 2...
    it's the same code as example 1, just more content)
    Neil Marshall, Feb 22, 2004
    #10
  11. Neil Marshall wrote:

    > I was recently asked how to do this (exactly) with CSS and I just
    > couldn't come up with an answer. Does anyone here know?
    >
    > http://www.eightlines.com/tech/columns/tablelayout1.html
    > http://www.eightlines.com/tech/columns/tablelayout2.html
    >


    I managed to come up with something that at least works in Mozilla. It
    fails in IE and opera gets it mostly right (For some reason the floated
    columns don't fill 100% of the space). I'm essentially just recreating
    a table using CSS though.

    Anyone know how to fix the opera bug at least? (I don't think the IE
    bug can be fixed)

    http://www.eightlines.com/tech/columns/csslayout1.html
    http://www.eightlines.com/tech/columns/csslayout2.html



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>CSS Layout</title>
    <style type="text/css">
    #evWrap {
    display: table;
    height: 99%;
    width: 100%;
    border: 3px solid blue;
    }

    #header, #footer {
    display: table-row;
    }

    #colWrap {
    display: table-row;
    border: 2px solid magenta;
    }

    #column1 {
    border: 1px solid black;
    float: left;
    width: 100px;
    height: 99%;
    }

    #column3 {
    border: 1px solid black;
    width: 100px;
    float: right;
    height: 99%;
    }

    #column2 {
    border: 1px solid black;
    margin: 0px 100px 0px 100px;
    height: 99%;
    }
    </style>
    </head>
    <body>
    <div id="evWrap">
    <div id="header">Header</div>
    <div id="colWrap">
    <div id="column1">Column 1</div>
    <div id="column3">Column 3</div>
    <div id="column2">Column 2</div>
    </div>
    <div id="footer">Footer</div>
    </div>
    </body>
    </html>
    Neil Marshall, Feb 22, 2004
    #11
  12. Neil Marshall

    Richard Guest

    Neil Marshall wrote:

    > Richard wrote:


    >> Neil Marshall wrote:
    >>
    > >> I was recently asked how to do this (exactly) with CSS and I just
    > >> couldn't come up with an answer. Does anyone here know?

    >>
    > >> http://www.eightlines.com/tech/columns/tablelayout1.html
    > >> http://www.eightlines.com/tech/columns/tablelayout2.html

    >>
    > >> As long as the content is smaller then the browser window, the columns
    > >> stretch to fill the available space and then the footer is displayed,
    > >> but as soon as the content gets really long (#2) it creates a scroll
    > >> bar and goes off the screen. Also all 3 columns are the same length
    > >>(I haven't put backgrounds in, but assume there would be... I can't
    > >>just leave all the columns different lengths).

    >>
    > >> Does anyone have a solution for this?

    >>
    >>Easy as 123!
    >>"Float:left" is necessary! Do not remove it!
    >>Once removed, you just have another division on top of a division.
    >><style type="text/css">
    >>.header { height:150px; width:99%; border:solid black; background:blue; }
    >>.footer {width:auto; height:150px; background:red; border: solid black; }
    >>.column { width: 33%; height:100px; border:solid white; background:pink;
    >>float: left;}
    >></style>
    >>
    >></HEAD>
    >><BODY>
    >><div class="header">text</div>
    >><div class="column">column 1</div>
    >><div class="column">column 2</div>
    >><div class="column">column 3</div>
    >><br style="clear:left;"> ................... <<<<<<< this says to end the
    >>float
    >><div class="footer">text</div>
    >></BODY>
    >></HTML>
    >>
    >>What's so difficult to understand?
    >>
    >>
    >>

    > That code doesn't do what I asked. I also want the height to fill up
    > the height of the browser window when the content is less then the size
    > of the browser (See example 1). When the content is longer then the
    > space available I want it to scroll like a normal page (See example 2...
    > it's the same code as example 1, just more content)



    If you were to put in 10 pages of text in column1, column1 would
    automatically extend it's height accordingly.
    The height and width properties are absolute minimums.
    You can also change the height so that it fills the screen size by using
    height: N% Where N is a number.

    Search for the web for "3collayout.html" and you'll get plenty of examples.
    Richard, Feb 22, 2004
    #12
  13. Richard wrote:

    >
    >If you were to put in 10 pages of text in column1, column1 would
    >automatically extend it's height accordingly.
    >The height and width properties are absolute minimums.
    >You can also change the height so that it fills the screen size by using
    >height: N% Where N is a number.
    >
    >
    >

    But then the header and footer would also need to be a percentage. What
    if I want to put a 100px tall image in there, and then have a couple
    lines of text, but have the column stretch to the bottom of the browser
    window. I can't do that with percentages because it will never quite be
    at the bottom of the window.
    Neil Marshall, Feb 22, 2004
    #13
  14. Neil Marshall

    rf Guest

    "Neil Marshall" <> wrote in message
    news:OXOZb.17144$...
    > I was recently asked how to do this (exactly) with CSS and I just
    > couldn't come up with an answer. Does anyone here know?
    >
    > http://www.eightlines.com/tech/columns/tablelayout1.html
    > http://www.eightlines.com/tech/columns/tablelayout2.html
    >
    > As long as the content is smaller then the browser window, the columns
    > stretch to fill the available space and then the footer is displayed,
    > but as soon as the content gets really long (#2) it creates a scroll bar
    > and goes off the screen. Also all 3 columns are the same length (I
    > haven't put backgrounds in, but assume there would be... I can't just
    > leave all the columns different lengths).
    >
    > Does anyone have a solution for this?


    This issue has been discussed at length in the CSS groups and forums. If you
    want to include the 85%+ of viewers who use IE then there is no solution.
    You will have to change your design.

    CSS is not about 'filling up the viewport' it is about presenting stuff on
    the 'page'. Note, page != viewport.

    Cheers
    Richard.
    rf, Feb 22, 2004
    #14
  15. Neil Marshall wrote:

    > Anyone know how to fix the opera bug at least? (I don't think the IE
    > bug can be fixed)


    Stop floating the columns and use "display:table-cell;" instead?

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Feb 22, 2004
    #15
  16. Neil Marshall

    Kevin Scholl Guest

    Els wrote:
    > A Hess wrote:
    >
    >> Somewhere around 2/21/04 1:36 PM, Els typed wildly with reckless abandon:
    >>
    >>> http://www.pixy.cz/blogg/clanky/css-3col-layout/
    >>>
    >>>

    >>
    >> That's really handy, but I have a question. Why are all the divs
    >> doubled up?
    >>
    >> example:
    >> <div id="middle"><div class="column-in">
    >> <h4>Middle Col</h4>
    >> <p id="mccont">
    >> This is content of the MIDDLE column.
    >> </p>
    >> </div></div>
    >>
    >> Just curious, Aron.

    >
    >
    > I think he (she?) did that just to make it easier to style the paddings
    > and margins on the text inside the divs.
    > As a style for div.column-in he defines nothing more than margin:0;
    > padding:0.5em 1em;, so I think it's just that, really.


    The nested DIVs are necessary to allow all three column backgrounds to
    extend the length of the longest column (regardless of the amount of
    content in each).


    --

    *** Remove the DELETE from my address to reply ***

    ======================================================
    Kevin Scholl http://www.ksscholl.com/

    ------------------------------------------------------
    Information Architecture, Web Design and Development
    ------------------------------------------------------
    We are the music makers, and we are the dreamers of
    the dreams...
    ======================================================
    Kevin Scholl, Feb 22, 2004
    #16
  17. Neil Marshall

    Els Guest

    Kevin Scholl wrote:

    > Els wrote:
    >
    >> A Hess wrote:
    >>
    >>> Somewhere around 2/21/04 1:36 PM, Els typed wildly with reckless
    >>> abandon:
    >>>
    >>>> http://www.pixy.cz/blogg/clanky/css-3col-layout/
    >>>>
    >>>>
    >>>
    >>> That's really handy, but I have a question. Why are all the divs
    >>> doubled up?
    >>>
    >>> example:
    >>> <div id="middle"><div class="column-in">
    >>> <h4>Middle Col</h4>
    >>> <p id="mccont">
    >>> This is content of the MIDDLE column.
    >>> </p>
    >>> </div></div>
    >>>
    >>> Just curious, Aron.

    >>
    >> I think he (she?) did that just to make it easier to style the
    >> paddings and margins on the text inside the divs.
    >> As a style for div.column-in he defines nothing more than margin:0;
    >> padding:0.5em 1em;, so I think it's just that, really.

    >
    > The nested DIVs are necessary to allow all three column backgrounds to
    > extend the length of the longest column (regardless of the amount of
    > content in each).


    As far as I can see and test, that only goes for nested divs
    'main1' and 'main2'. All the divs 'column-in' can be taken
    out, with no other effect than losing the padding and margin
    styles inside the divs.

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 22, 2004
    #17
  18. rf wrote:

    >CSS is not about 'filling up the viewport' it is about presenting stuff on
    >the 'page'. Note, page != viewport.
    >
    >

    I'm being difficult here but I expect it to fit to a page when I'm
    making a print stylesheet, the screen should be handled differently. :)
    Neil Marshall, Feb 23, 2004
    #18
  19. Richard wrote:
    > The height and width properties are absolute minimums.


    What? min-width and min-height are minimums, height and width are
    absolute. Where do you get your nonsense?
    Leif K-Brooks, Feb 23, 2004
    #19
  20. Neil Marshall

    rf Guest

    "Neil Marshall" <> wrote in message
    news:2Ab_b.2140$...
    > rf wrote:
    >
    > >CSS is not about 'filling up the viewport' it is about presenting stuff

    on
    > >the 'page'. Note, page != viewport.
    > >
    > >

    > I'm being difficult here but I expect it to fit to a page when I'm
    > making a print stylesheet, the screen should be handled differently. :)


    You can be as difficult as you like but IE simply does not support what you
    want to do.

    Cheers
    Richard.
    rf, Feb 23, 2004
    #20
    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:
    713
    clintonG
    Dec 24, 2004
  2. tom watson

    print.css and screen.css

    tom watson, Sep 9, 2003, in forum: HTML
    Replies:
    1
    Views:
    464
    Jukka K. Korpela
    Sep 9, 2003
  3. Joshua Beall
    Replies:
    1
    Views:
    425
    Bertilo Wennergren
    Dec 10, 2003
  4. Noozer
    Replies:
    10
    Views:
    2,089
    Mitja
    Oct 13, 2004
  5. Titus A Ducksass - AKA broken-record
    Replies:
    6
    Views:
    651
    Titus A Ducksass - AKA broken-record
    Nov 15, 2004
Loading...

Share This Page