Hi,
Perhaps something like this might work for you.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body {height:100%;}
body {
margin: 0px;
padding: 0px;
}
#container {
position: relative;
width: 750px;
height:100%;
margin: 0 auto 0 auto;
background:blue;
z-index:10;
}
#rightcol {
position:absolute;
right:0;
top:0;
width:30%;
height:100%;
background-image: url(http://new.glennhaworth.co.uk/images/tile_right.jpg);
background-repeat: repeat-x;
background-position: left top;
z-index:2;
}
#leftcol {
position:absolute;
left:0;
top:0;
width:30%;
height:100%;
background-image: url(http://new.glennhaworth.co.uk/images/tile_left.jpg);
background-repeat: repeat-x;
background-position: left top;
z-index:2;
}
</style>
</head>
<body>
<div id="container">Content</div>
<div id="leftcol"></div>
<div id="rightcol"></div>
</body>
</html>
Just place left and right columns absolutely so that you can place your background gif in them.
Hope that helps.
Paul
3 column layout problem
Bookmarks