Webmaster Forum / HTML, CSS, Scripts / CSS / July 2008

OK, here's my old style table:

[logo][ title ]
[menu][content]

Top row is 100 px high, left column is 200 px wide, table width is 100%
of body, so the right column expands to use all the remaining window
width automatically.

My first problem is that I'm unsure whether to create two "column" divs
and put two "row" divs in each "column", or to create two "row" divs
each containing two "column" divs, or just create four separate divs
corresponding to each of the 4 table cells.

Using the "less is more" theory, I define 4 divs:

#logo {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    height: 100px;
    background-color: blue;
    }
#title {
    position: absolute;
    top: 0px;
    left: 200px;
    height: 100px;
    background-color: blue;
    }
#menu {
    position: absolute;
    top: 100px;
    left: 0px;
    width: 200px;
    background-color: blue;
    }
#content {
    position: absolute;
    top: 100px;
    left: 200px;
    background-color: yellow;
    }

body {
    background-color: blue;
    }

With these definitions, the top left corner of each div is now in the
right place, the width of the menu / logo and height of the title / logo
are correct, but the "title" div doesn't expand across the full width of
the "content" div, and the "menu" div doesn't expand to the full length
of the "content" div.

This means, for example, that I can't center a short title in the title
div relative to the content div, because the width of the title div
(containing h1 with text) is determined by the width of the text inside
the h1, if the text is less than enough to wrap the div simply doesn't
expand all the way.

I can "kludge" the background colours issue by setting the body colour
to the same as the menu / logo / title colour if I use the same colours
in those three divs, but I also get a problem on eg my "site map" page
because the site map content is a nested list and the content isn't wide
enough to cause the div to expand to the full width, so the body colour
then appears on the right of the div.

I guess I should restate my problem as one of making the divs expand to
the limits of the container even when their content is minimal (or empty)

Ideas? Suggestions?

Denis

Fix your broken newsreader...