Problem with layouting without tables

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 | Content | BG 3 |
+------+ +------+
|
|
|
|
|
~~~~~~~~~~~~~~~~~~~~

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

--
Juergen Lang <getinspired (AT) despammed (DOT) com> http://getinspired.at

Maybe assigning
width: auto;
to the content DIV might make it center--or negative margins?

best,
xtort

Juergen Lang <getinspired (AT) despammed (DOT) com> wrote

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 | Content | BG 3 |
+------+ +------+
| |
| |
| |
| |
| |
~~~~~~~~~~~~~~~~~~~~

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

Juergen Lang wrote:

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 | Content | BG 3 |
+------+ +------+
| |
| |
| |
| |
| |
~~~~~~~~~~~~~~~~~~~~

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:

[snip code]

postion: relative;
postion: relative;
postion: relative;

Besides not needing position:relative, it wouldn't work with
the missing i in the word...

As the left and right 'area' are only to hold pictures, I
suppose you need this:

html:
<div id="container">
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
</div>

Assuming each picture is 50px wide:

CSS:
body{text-align:center;}
#container{width:950px;margin:0px auto;text-align:left;}
#left{width:50px;}
#main{width:850px;}
#main{width:50px;}

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?!

Ah, so the pictures on the left and right should be larger
when the window is larger and smaller if the window is
smaller...

Okay:

HTML:

<div id="container">
<div id="inner">
<div id="main"></div>
</div>
</div>

CSS:

#container{
background-image:url(leftimage.jpg);
background-position:top left;
background-repeat:no-repeat; /*or repeat-y*/
}
#inner{
background-image:url(rightimage.jpg);
background-position:top right;
background-repeat:no-repeat; /*or repeat-y*/
text-align:center;
}
#main{
width:850px;
margin:0 auto;
text-align:left;
}

NOT tested!

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

Thank you very much in advance,
Juergen

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Hello!

Ah, so the pictures on the left and right should be larger
when the window is larger and smaller if the window is
smaller...

That's right ...

Okay:

HTML:

div id="container"
div id="inner"
div id="main"></div
/div
/div

CSS:

#container{
background-image:url(leftimage.jpg);
background-position:top left;
background-repeat:no-repeat; /*or repeat-y*/
}
#inner{
background-image:url(rightimage.jpg);
background-position:top right;
background-repeat:no-repeat; /*or repeat-y*/
text-align:center;
}
#main{
width:850px;
margin:0 auto;
text-align:left;
}

NOT tested!

Very good idea!
The only problem with this is, that the rightimage.jpg lays over the
leftimage.jpg along the whole width of the screen, because I have to use
repeat-x (BG-tile).


Now my *working* solution (based on yours) is as follows:

CSS:

#container{
background-image: url('images/bg_rgt.jpg');
background-position: top right;
background-repeat: repeat-x;
}
#inner{
background-image: url('images/bg_lft.jpg');
background-position: top left;
background-repeat: no-repeat;

}
#main{
width: 851px;
margin: 0px auto auto auto;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
height: 78px;
}

HTML:

<div id="container">

<div id="inner">

<div id="main">test</div>

</div>

</div>

'bg_lft.jpg' now has a fixed width of 550px, so that (even on very high
screen resolutions) it overlays images/bg_rgt.jpg for the width of 525px
and then 'images/bg_rgt.jpg' begins. Both are overlayed with the 'main'
area!

Not the finest way, but ... a working way.

Thank you very much!

--
Juergen Lang <getinspired (AT) despammed (DOT) com> http://getinspired.at

Hello!

Maybe assigning
width: auto;
to the content DIV might make it center--or negative margins?

Funnily, assigning a width of 'auto' does not solve the problem.
The browser makes 'auto' to the full width of the current window, so
that the next <div> tag begins in the next row. :\

Thank you,
Juergen Lang


--
Juergen Lang <getinspired (AT) despammed (DOT) com> http://getinspired.at