[thelist] ROLL UP! ROLL UP! Who can convert this simple table layout to CSS?

Mon Jul 25 07:05:18 CDT 2011

Thanks for your reply @Patrick! It really *looks* like what I wanted.

Unfortunately though, (and I wasn't explicit in my initial challenge about
this - sorry), I was seeking a solution where the height of #postheader
would essentially be (100% - #header height). It looks that way in your
solution, but the background colour comes from the parent container
#thecontent rather than #postheader, which disguises the fact that
#postheader is really the height of its content.

The reason I want to get (100% - pixel height of header) should hopefully be
clear upon seeing the prototype of the design here:
http://snipurl.com/t7pyu-meep.

The design is centred, and consists of a page header above the page content.
The "page" in the design moves over the dark tiled background as the window
is resized horizontally. The "page" background image needs to stretch down
to the bottom of the window regardless of the amount of content it holds. As
you can see in the current prototype, the "page" background image definitely
does not do that (because in my attempts to solve the (100% - pixel amount)
problem I have used bottom:0 which is clearly not the right thing to do).

Things I have tried:

- Created a 100% height parent container for the page header AND the page
content, and set this parent container's background image to the "page"
background. This doesn't work because the page header's background image is
semi-transparent and so you can see the page content background peeking
through.

- Set the page content div to 100% height. This doesn't work because the
total height ends up being 100% + page header height. This means that there
is a scroll bar even when it isn't required.

- Made the whole design into the body's background image, which judicious
fade-to-black. This doesn't work because ... well, you end up with a huge
image, and it feels like cheating :)

At some point I realised that the layout I wanted would be really easy to
achieve with tables. That's when I decided to seek help here :)

My thoughts are that this kind of design is very common, and so I must be
approaching it the wrong way. Any pointers on how to lay this out would be
very much appreciated!

I agree with your sentiments about IE6. Luckily the stuff we produce has a
reasonably limited distribution, and we no longer need to support IE6. Our
users use IE7+, FF3.6+, Chrome and Safari.

Cheers,
CB.

On Sat, Jul 23, 2011 at 9:54 AM, Patrick Horgan <phorgan1 at yahoo.com> wrote:

> How's this?
>
> <!DOCTYPE html>
> <html>
>  <head>
>    <meta charset=utf-8" />
>    <title>CSS layout</title>
>    <style type="text/css">
>      * { margin: 0; padding: 0; }
>      html, body {
>        height: 100%;
>      }
>      #thecontent{
>        width:500px;
>        height:100%;
>        background-color: rgb(194,224,248);
>        margin: auto;
>      }
>      #header{
>        background-color: rgb(224,245,220);
>        height: 52px;
>        line-height: 52px;
>      }
>      #postheader p {
>        padding-top: 1em;
>        background-color: rgb(194,224,248);
>      }
>    </style>
>  </head>
>  <body>
>    <div id='thecontent'>
>      <div id='header'>
>          Header here
>      </div>
>      <div id='postheader'>
>         <p>
>          Content would go in here. If there isn't enough content to
>          fill the screen, this blue section should still stretch to
>          the bottom of the window. If there are scrollbars however,
>          the blue section should stretch to the bottom of the content.
>        </p>
>        <p>
>          Content would go in here. If there isn't enough content to
>          fill the screen, this blue section should still stretch to
>          the bottom of the window. If there are scrollbars however,
>          the blue section should stretch to the bottom of the content.
>        </p>
>        <p>
>          Content would go in here. If there isn't enough content to
>          fill the screen, this blue section should still stretch to
>          the bottom of the window. If there are scrollbars however,
>          the blue section should stretch to the bottom of the content.
>        </p>
>       </div>
>    </div>
>  </body>
> </html>
>
> --
>
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>