I'm making a website that has to fit in the entire screen regardless of screen-size. I'm using a table to use this at the moment but I ran into a problem.
The web page is divided into 3 columns: the left column stays at the left of the screen and has a fixed size with a background. the right column stays at the right of the screen and has a fixed size with a background. the middle column should be stretched between his neighbouring cells and should have a background that stretches with it (only horizontally)
This way the web page should always look as it was made for the screen you're using to view the site.
However my problem is the middle cell, the image doesn't repeat, somehow the css code: background-repeat:x-repeat; doesn't make the image stretch, also when I put the cell width on 100% it interferes with his neighbouring cells making it look like a mess.
How can I achieve this?
EDIT
Here is the markup I'm using:
CSS:
#topleftcell
{
background-image:url(../images/Logo.png);
background-repeat:no-repeat;
width:300px;
}
#topmiddlecell
{
background-image:url(../images/header_fill.png);
background-repeat:repeat-x;
width:auto;
}
#toprightcell
{
background-image:url(../images/header_right.gif);
background-repeat:no-repeat;
width:16px;
}
HTML:
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr style=" width:100%;">
<td id="topleftcell"></td>
<td id="topmiddlecell"></td>
<td id="toprightcell"></td>
</tr>
</table>
</body>