CSS centered fixed 3 column with background image

Clint Neilsen · #1 (**permalink**) 12-30-2005, 10:22 PM

I am finding something very simple with tables impossible to replicate with a CSS layout. A fixed design with repeating background image margins in HTML is easy
<table width="720"
<tr>
<td background="images/tb1.gif"width="28">
</td>
<td width="*" bgcolor="#FFFFFF">

main content area</p>
</td>
<td background="images/tb1.gif" width="28">
</td>
</table>
I have made the following prototype in CSS, using position: relative & absolute (it only works with these unfortunately). The background images will not repeat in the margins and it only centers in IE5. I am amazed this has been so difficult to replicate in CSS
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Three-column Layout</title>
<style type="text/css">
BODY {
background-color : yellow;
margin:0px;
text-align: center;
}
#content {
background-color: white;
padding: 35px;
position: relative;
width: 650px;
height: 510px;
margin-right: auto;
margin-left: auto;
text-align: center;
margin: 0px 25px 0px 25px;
}
#left {
background-color: yellow;
padding: 0px;
width: 28px;
position: absolute;
left: 0px;
top: 0px;
}
#right {
background-color: yellow;
width: 28px;
position: absolute;
right: 0px;
top: 0px;
}
H1 {
background-image: url(images/tb1.gif);
background-repeat: repeat-y;
margin-top: 0px;
height: 510px;
}
H1 span {
display:none;
}
H2 {
background-image: url(images/tb2.gif);
background-repeat: repeat-y;
margin-top: 0px;
height: 510px;
}
H2 span {
display:none;
}
#one{
background-color: white;
padding: 0px;
text-align: left;
width: 300px;
position: absolute;
left: 50px;
top: 140px;
}
#two{
background-color: white;
padding: 0px;
text-align: left;
width: 300px;
position: absolute;
left: 350px;
top: 140px;
}
</style>
</head>
<body>
<div id="content">
<div id="left">
<H1><span></span></H1>
</div>
[img]images/logo.gif[/img]
<div id="one"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In
vestibulum vestibulum elit. Ut porta. Duis vulputate bibendum
tellus. Vivamus dictum egestas mi. Cras justo. Vestibulum nisl
mauris, convallis a, vestibulum et, accumsan vel, lacus. Morbi
mattis viverra turpis. Pellentesque blandit quam in sapien. Proin
pellentesque, purus sit amet mollis sollicitudin, lacus leo
rhoncus enim, nec vestibulum urna tellus at magna. Ut
adipiscing.</p>
</div>
<div id="two"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In
vestibulum vestibulum elit. Ut porta. Duis vulputate bibendum
tellus. Vivamus dictum egestas mi. Cras justo. Vestibulum nisl
mauris, convallis a, vestibulum et, accumsan vel, lacus. Morbi
mattis viverra turpis. Pellentesque blandit quam in sapien. Proin
pellentesque, purus sit amet mollis sollicitudin, lacus leo
rhoncus enim, nec vestibulum urna tellus at magna. Ut
adipiscing.</p>
</div>
<div id="right">
<H2><span></span></H2>
</div>
</div>
</body>
</html>

Does anybody know any sites that have repeating background images in CSS? (tb1.gif & tb2.gif are both 28 pix x 110 and represent torn edges)

frogmanandy · #2 (**permalink**) 12-31-2005, 01:11 AM

Hey I am new to this as well, but I believe what you need to do to center your page is

css

use a div id that encompasses all your divs and add this

main# {
margin-left: auto;
margin-right: auto;
width: xxxpx;
text-align: center;
}

Clint Neilsen · #3 (**permalink**) 12-31-2005, 09:08 PM

Thanks Frogmanandy unfortunately that approach made it play up. I furthered your concept as you can see below but the good old image backround provides a negative result. Perhaps repeating backgrounds just cannot be done in CSS the same as tables.
<style type="text/css">

body {
text-align:center;
background-color : yellow;
margin:0px;
}

#frame {
width:650px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
}

#contentleft {
width:28px;
padding:0px;
float:left;
background:#fff;
}

#contentcenter {
width:300px;
padding:0px;
float:left;
background:#eee;
}

#contentright {
width:28px;
padding:0px;
float:left;
background:#fff;
}
H1 {
background-image: url(images/tb1.gif);
background-repeat: repeat-y;
margin-top: 0px;
height: 110px;
}
H1 span {
display:none;
}
H2 {
background-image: url(images/tb2.gif);
background-repeat: repeat-y;
margin-top: 0px;
height: 110px;
}
H2 span {
display:none;
}

</style>
</head>
<body>
<div id="frame">

<div id="contentleft">
<H1><span></span></H1>
</div>

<div id="contentcenter">
<h1>contentcenter</h1>
<pre>#contentcenter {
width:300px;
padding:0px;
float:left;
background:#eee;
}</pre>

3 columns all with static widths, and contained in a parent DIV wihich remains centered in the window. One rather serious limitation of this particular technique is that if any of the three content DIVs contains an image or a really long word that is longer than the width of the DIV, it totally breaks the layout. Each browser breaks it differently.</p>

Scroll down for the source.</p>
<p class="greek">Enterprise engenderment accelerates initiative platforms, reducing staffing components, integration of technical accessibility, resulting in bottom line pluralisms, benefit-wise. Incidental re-sizing staff requirements through attrition can be accelerated by paridigm shifts and focusing on core suitability and cross-training. </p>
</div>

<div id="contentright">
<h1>contentright</h1>
<pre>#contentright {
width:175px;
padding:0px;
float:left;
background:#fff;
}</pre>

This page is part of CSS Layout Techniques, a resource for web developers and designers.
</p>

Other Layout Techniques:

3 columns, the holy grail

2 columns, ALA style

4 columns, all fluid

3 columns, all fluid

static width and centered

nested float

</p>

Does it validate?
</p>
</div>
<br clear="all" />
</div>

</body>

drummin · #4 (**permalink**) 01-21-2006, 03:53 AM

Make an image the width of your page with torn edges.
Make a heading image the size you want then modify CSS size/positions if needed.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Three-column Layout</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
background-color:#efefef;
}
.heading {
background: url("../images/heading.gif") no-repeat 0% 0%;
position: absolute;
top:10px;
left:50%;
width:720px;
height:70px;
margin-left: -360;}
.headingtext {
position: absolute;
top:30px;
left:50%;
margin-left: -330;
font: bold 20px/1 Tahoma; color: #990000;}
.contentback {
background: url("../images/tornback.gif") repeat-y 100% 0%;
position: absolute;
top:80px;
left:50%;
width:720px;
margin-left: -360;
}
#textarea {padding:20px;}
p {text-align:justify;}
</style>
</head>
<body>
<div class="heading"></div>
<div class="headingtext">My Little Site</div>
<div class="contentback"><div id="textarea">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In
vestibulum vestibulum elit. Ut porta. Duis vulputate bibendum
tellus. Vivamus dictum egestas mi. Cras justo. Vestibulum nisl
mauris, convallis a, vestibulum et, accumsan vel, lacus. Morbi
mattis viverra turpis. Pellentesque blandit quam in sapien. Proin
pellentesque, purus sit amet mollis sollicitudin, lacus leo
rhoncus enim, nec vestibulum urna tellus at magna. Ut
adipiscing.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In
vestibulum vestibulum elit. Ut porta. Duis vulputate bibendum
tellus. Vivamus dictum egestas mi. Cras justo. Vestibulum nisl
mauris, convallis a, vestibulum et, accumsan vel, lacus. Morbi
mattis viverra turpis. Pellentesque blandit quam in sapien. Proin
pellentesque, purus sit amet mollis sollicitudin, lacus leo
rhoncus enim, nec vestibulum urna tellus at magna. Ut
adipiscing.</p>
</div></div>
</body>
</html>