Div split into 3 parts...?

**rolda hayes** · 03-25-2008, 12: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, 01: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, 01: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, 02: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** · 05: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, 09: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>

03-25-2008, 12:47 PM	#1 (permalink) Div split into 3 parts...?
rolda hayes Wannabe Adventurer... Posts: 477 Name: Darren Location: England Talkupation:	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"> </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"> </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 __________________ "I always wanted the adoration of John Lennon - With The Anonimity of Ringo Starr..." QuizBay Help with the testing of this Beta site!

03-25-2008, 01:15 PM	#2 (permalink) Re: Div split into 3 parts...?
LadynRed Super Moderator Posts: 5,557 Location: Tennessee Talkupation:	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 __________________ Web Goddess & Web Standards Evangelist :) - Tables Be Gone !! "Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"

03-25-2008, 01:37 PM	#3 (permalink) Re: Div split into 3 parts...?
rolda hayes Wannabe Adventurer... Posts: 477 Name: Darren Location: England Talkupation:	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... __________________ "I always wanted the adoration of John Lennon - With The Anonimity of Ringo Starr..." QuizBay Help with the testing of this Beta site!

03-25-2008, 05:30 PM	#5 (permalink) Re: Div split into 3 parts...?
rolda hayes Wannabe Adventurer... Posts: 477 Name: Darren Location: England Talkupation:	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... * __________________ "I always wanted the adoration of John Lennon - With The Anonimity of Ringo Starr..." QuizBay Help with the testing of this Beta site! Last edited by rolda hayes : 03-25-2008 at 05:31 PM.