CSS Forum

**rolda hayes** · 03-25-2008, 01:47 PM

I'm trying to buid a site without using any tables and am really struggling!

Here is what I am trying to do demonstrated with tables

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="3%" background="images/bg1.jpg">&nbsp;</td>
    <td width="95%" background="images/bg1.jpg"><div align="center"><img src="images/header.jpg" width="950" height="160" /></div></td>
    <td width="2%" background="images/bg1.jpg">&nbsp;</td>
  </tr>
</table>

Its a table of 100%, split into 3 colums.
A header image is in the middle one and there are 2 "border images" either side so the header then stays central but the sides "stetch" the whole page no matter what screen res....

How is this achieved using CSS?

Ta

**LadynRed** · 03-25-2008, 02:15 PM

3-column layout - make the outer 2 liquid using percentages and float them left and right. Set the center column as a fixed width, and float it too. Using floats will keep them all next to each other. Just avoid putting margins and padding on the floated boxes themselves as this will trigger some ugly IE bugs. If you must use margins, then you'll need conditional comments and a separate file to hold the css to kill the IE bugs.

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

www.positioniseverything.net

**rolda hayes** · 03-25-2008, 02:37 PM

Thanks for the help.

All this just to make a footer with a central bg image and some links over the top..?

I still just dont get the advantage of using css instead of tables...

Maybe I'll have one of those "Eureka" moments where it all make sense...

**LadynRed** · 03-25-2008, 03:01 PM

Quote:

All this just to make a footer with a central bg image and some links over the top..?

That's all you want ?? Your question was to reproduce a 3-column layout, more or less was it not ?

There are LOTS of reason why css is better than tables, but you can start here:
http://www.hotdesign.com/seybold/everything.html

**rolda hayes** · 06:31 PM

Sorry,

the code was from this page that i was trying to incorporate in a CSS layout page.

a 3 column layout I can handle - but couldnt replicate the above exactly...

I made the test page using tables first - now trying to do it using CSS

* Man i've got so much to learn... *

**LadynRed** · 03-25-2008, 10:45 PM

Ok.. try this:

Quote:

<head>
<style type="text/css">

body{
background: #000 url(footer_files/logo.jpg) no-repeat center 40%;
color: #fff;
margin: 0;
padding: 0;
}

#container{

background: url(footer_files/bg1.jpg) repeat-x bottom;
min-height: 620px;
margin: 0;
padding: 0;

}

#wrapper{
position: relative;
width: 950px;
min-height: 620px;
background: url(footer_files/footer.jpg) no-repeat bottom center;
margin: 0 auto;
padding: 0;

}

#footer{
position: relative;
height: 180px;
margin: 0 auto;
padding-top: 1px;
top: 430px;
}
#footer ul{
padding: 0;
list-style: none;
width: 450px;
margin: 150px 0 0 160px;
color: #BC9B6A;
}

#footer ul li {
display: inline;
padding: 0 5px;
}

#footer a{
color: #bc9b6a;
}

</style>
</head>

<body>
<div id="container">
<div id="wrapper">

<div id="footer">
<ul>
<li><a href="#">About Us</a></li> -
<li><a href="#">Services</a> </li> -
<li><a href="#">Testimonials</a></li> -
<li><a href="#">Case Studies</a></li> -
<li><a href="#">Contact</li>
</ul>

</div> 
</div> 
</div>

</body>