Forum Moderators: not2easy
Hello, I have a 3 column layout, consisting of; a right border, main content, left border. Both borders contain a background image that finishes off the design from the main content. What I want to try and achieve is to have the main content a fixed width, say 960px, but have both borders expand to the width of the page. So the user will see more of the background image as the browser is wider... And for the page to be aligned in the centre of the page as well....
This is my code so far...
---------HTML Code--------------
<body>
<div id="wrapper">
<div id="borderLeft">
<p>borderLeft </p>
</div>
<div id="main">
<p>main </p>
</div>
<div id="borderRight">
<p>borderRight </p>
</div>
</div>
</body>
---------CSS Code--------------
body {
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #330099;
}
#wrapper {
position:relative;
margin:0 auto;
width:1286px;
text-align:left;
}
#borderLeft {
width:163px;
height:474px;
float:left;
background-image:url(images/border-left.jpg);
background-repeat:no-repeat;
}
#main {
width:960px;
float:left;
}
#borderRight{
width:163px;
height:474px;
float:left;
background-image:url(images/border-right.jpg);
background-repeat:no-repeat;
}
I've tried loads of different things with the width of the borders and the wrapper but can't seem to get it right..
Please can someone help me out.
Many thanks
#borderLeft { width:auto; float:left; }
#borderRight { width:auto; float:left; }
#main { width:960px; margin-left:auto; margin-right:auto; float:left;}
Please try may be it's useful. Also add necessary attributes.
<snip>
[edited by: swa66 at 10:19 pm (utc) on May 20, 2009]
[edit reason] No peronal URLs please see ToS and forum charter [/edit]
Apply that image centered to the background of e.g. the html, and put the bpody (or a wrapper if you prefer that) of a fixed width and auto margined to fit it's space inbetween the parts of the image on the html.
No need for 3 cols...
