Adding columns to page

speed · July 2nd, 2009, 03:17 PM

www.elitetradesmen.com

I've now got almost everything how i want on my site but i'm considering putting some sort of background image where the white is or should i just leave it the way it is.

Also thinking of putting a column either side to fill up the white space, in these columns i can then add adverts for various companies. Is this going to be easy to do and if it is how do i go about it. If anyone knows of any site laid out similar to what i've suggested a link would be appreciated.

junior · July 3rd, 2009, 05:29 AM

I don't know of any sites that are like what you are suggesting but the obvious answer is to use CSS to create the three columns, left and right for the adverts and the centre one for the main content. You would possibly have issues when the browser is reduced to a smaller window but it is something that would take work.....

Example...

CSS

body {
background-color: #ffffff;
color: #000000;
font-family: arial;
padding-left: 45px;
width: 900px;
}
#boxl {
width: 100px;
height: 500px;
background-color: #FFFFCC;
padding-top: 25px;
margin: 2px;
border-top: 2px outset #CCCCCC;
border-left: 2px outset #CCCCCC;
border-right: 2px outset #999999;
border-bottom: 2px outset #999999;
float: left;
}
#box2 {
width: 600px;
height: 500px;
background-color: #FFFFCC;
padding-top: 25px;
margin: 2px;
border-top: 2px outset #CCCCCC;
border-left: 2px outset #CCCCCC;
border-right: 2px outset #999999;
border-bottom: 2px outset #999999;
float: left;
}
#boxr {
width: 100px;
height: 500px;
background-color: #FFFFCC;
padding-top: 25px;
margin: 2px;
border-top: 2px outset #CCCCCC;
border-left: 2px outset #CCCCCC;
border-right: 2px outset #999999;
border-bottom: 2px outset #999999;
float: left;
}

HTML

<html>
<head>
<title> </title>
<link href="example.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="boxl">
</div>
<div id="box2">
</div>
<div id="boxr">
</div>
</body>
</html>

Change the sizes colours etc, put your main content in the Box2 div and there you have it.