3 column layout - background image problem

nicky77

08-04-2007, 04:41 PM

Hi, I'm trying to use a 3 column layout with a different background image for each column. The only column i'll be using for content is the centre one. The way i've done it at the moment is giving me a problem as when i reduce the size of the window the centre column remains fixed, which i want, but the right hand column travels to the left at full size as i minimise the window size, and therefore obscures the centre column holding the content. Any advice on how i should tackle this problem - i would like a fluid layout ideally, but maybe a fixed layout may work better given the way i've constructed the layout so far. Any advice would be great - as i'm a bit out of my depth and am still in the early stages of learning to use CSS.

html
<CODE>
<body>
<div id="mainwrap">
<div id="contentarea">
<div id="contentarea2">
<div id="column1">
</div>
<div id="column2">
<div id="header">
<h1>ANTONINE SPORTS CENTRE</h1>
</div>
</div>
<div id="column3">
</div>
</div>
</div>
</div>
</body>
</CODE>

the css...
<CODE>
* {
margin: 0;
padding: 0;
height:100%;
}

#mainwrap{
background: url(new_background/background_middle.jpg) repeat-x;
height:100%;
}

#contentarea{
}

#contentarea2{
}

#column1{
position:absolute;
left:0px;
width:240px;
background: url(new_background/border_left.jpg) repeat-y top left;
}

#column2{
position:absolute;
margin-left:250px;
margin-right:250px;
}

#column3{
position:absolute;
right:0px;
width:240px;
background: url(new_background/border_right.jpg) repeat-y top right;
}

#header {
height:90px;
background: url(antonine_logo_rev3.png) ;
background-repeat:no-repeat;
margin-top: 60px;
}
</CODE>

BWiz

08-04-2007, 04:50 PM

nicky77

08-04-2007, 05:27 PM

Thanks for the reply bwiz, definitely simplifies the code i originally had. I've still got a problem, however, as I want the background images to repeat for 100% of the page, so i've added the code which i thought would do this. With the code below, strangely anything else i want to add in the center column disappears into whitespace at the bottom of the page, where the background images have stopped repeating. Do you have any idea why this might be happening?

<code>
<style type="text/css">
* {
margin: 0;
padding: 0;
height:100%;
}

#left, #center, #right { float: left; width: 20%; height:100%;}

#left {
background: url(new_background/border_left.jpg) repeat-y top left;
}

#center {
background: url(new_background/background_middle.jpg) repeat-x;
width:60%;
}

#right {
background: url(new_background/border_right.jpg) repeat-y top right;
}
</style>

<div id="left">
<p>This is the left column</p>
</div>
<div id="center">
<p>This is the center column</p>
<p>more stuff</p>
</div>
<div id="right">
<p>This is the right column</p>
</div>
</code>

Jutlander

08-04-2007, 05:32 PM

Can you attach your background images here?

nicky77

08-04-2007, 06:07 PM

here they are here....

koyama

08-05-2007, 12:19 AM

With the code below, strangely anything else i want to add in the center column disappears into whitespace at the bottom of the page, where the background images have stopped repeating. Do you have any idea why this might be happening?
Can you please post your complete code? It would be even better if you gave us a link.

nicky77

08-05-2007, 07:18 PM

Hi, here is the full code for the xhtml and css files. Don't have a link at present unfortunately. Grateful for any help as i still can't solve this problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Antonine Sports Centre</title>
<link href="style5.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="left">
</div>
<div id="center">
<div id="header">
<h1>ANTONINE SPORTS CENTRE</h1>
</div>
<p>This is the center column and this is in the correct position</p>
<p>However, this paragraph is placed in whitespace at the bottom of the screen,
where the images have stopped repeating</p>
</div>
<div id="right">
</div>
</body>
</html>

//the css file
* {
margin: 0;
padding: 0;
height:100%;
}

body,html{height:100%}

#left, #center, #right { float: left; width: 20%; min-height:100%;}

#left {
background: url(new_background/border_left.jpg) repeat-y top left;
}

#center {
background: url(new_background/background_middle.jpg) repeat-x;
width:60%;
}

#right {
background: url(new_background/border_right.jpg) repeat-y top right;
}

#header {
height:90px;
background: url(antonine_logo_rev3.png) ;
background-repeat:no-repeat;
margin-top: 60px;
}