Webmaster Forum / HTML, CSS, Scripts / CSS / August 2004

Hello!

I want to style a layout without the use of tables.
Instead of tables, I would like to use styled div-tags.

The Layout is (or better: should be) as follows:

+--------------------------------+

+------+                  +------+
       |                  |
       |                  |
       |                  |
       |                  |
       |                  |
       ~~~~~~~~~~~~~~~~~~~~

BG 1 and BG 2 are different images. The "Content" area has a width of
850px and should be centered! Left and right space from the "Content"
area should be filled with those two background images.

This was my first attempt:

Style:
-----------------------------------------------------------------------

div#main-lft {
    postion: relative;
    background: url('images/bg_lft.jpg');
    background-repeat: repeat-x;
    height: 78px;
    float: left;
}

div#main-mid {
    width: 851px;
    postion: relative;
    margin: 0px auto auto auto;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    float: left;
}

div#main-rgt {
    postion: relative;
    background: url('images/bg_rgt.jpg');
    background-repeat: repeat-x;
    height: 78px;
    float: left;
}

HTML:
-----------------------------------------------------------------------

<div id="main">

    <div id="main-lft">&nbsp;</div>

    <div id="main-mid">Content</div>

    <div id="main-rgt">&nbsp;</div>

</div>

The items are now positioned like they should be, but the "Content" area
is not centered and the background areas do not fill the rest of the
screen?!

Now, does anybody have an idea of how to solve this layout problem?

Thank you very much in advance,
Juergen