laluuk
04-28-2007, 09:08 AM
hey guys, newbiee here, need some help with a css layout, below is the code that i've got. it is 3 columns with fixed center and fluid sidebars . What I need help in is, i want to have equal height columns (100%??) actually, say for e.g. if the contents in the center container is longer then the screen size I want the sidebar images and background image to stretch to the right length.
can someone please modify the code posted below or tell me how i could achieve. i would much appreciate your help. thanx to anyone in advance for helping me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style>
body {
margin: 0px;
}
#container {
background: url('gradient.gif') repeat-y;
/*image needs to be stretched to the correct length, same as center*/
}
#content {
position: absolute;
left: 50%;
margin-left: -355px;
width: 710px;
background: url('content_image.gif') repeat-y;
}
#wrapside1 {
float: left;
width: 50%;
}
#wrapside2 {
float: right;
width: 50%;
}
#side1 {
margin-right: 355px;
background: url('left_image.gif') repeat-y;
/*image needs to be stretched to the correct length, same as center*/
}
#side2 {
margin-left: 355px;
background: url('right_image.gif') repeat-y;
/*image needs to be stretched to the correct length, same as center*/
}
#footer {
width: 100%;
height: 90px;
background: #FDE95E;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut id tortor eu nisl scelerisque euismod. Nulla facilisi. Nulla facilisi. Proin vel massa eu erat porttitor scelerisque. Aliquam vel massa quis libero convallis viverra. Pellentesque quis nibh eu nibh pulvinar varius. Vivamus elementum porttitor nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras adipiscing pede a velit. Quisque tellus lacus, pellentesque et, nonummy sit amet, adipiscing a, wisi. Nulla quis sem. Nam convallis eleifend sapien.</p>
<div id="footer"> Footer </div>
</div>
<div id="wrapside1">
<div id="side1">
Side column with fluid size, but equal to that of other side
</div>
</div>
<div id="wrapside2">
<div id="side2">
Side column with fluid size, but equal to that of other side
</div>
</div>
</div>
</body>
</html>
can someone please modify the code posted below or tell me how i could achieve. i would much appreciate your help. thanx to anyone in advance for helping me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style>
body {
margin: 0px;
}
#container {
background: url('gradient.gif') repeat-y;
/*image needs to be stretched to the correct length, same as center*/
}
#content {
position: absolute;
left: 50%;
margin-left: -355px;
width: 710px;
background: url('content_image.gif') repeat-y;
}
#wrapside1 {
float: left;
width: 50%;
}
#wrapside2 {
float: right;
width: 50%;
}
#side1 {
margin-right: 355px;
background: url('left_image.gif') repeat-y;
/*image needs to be stretched to the correct length, same as center*/
}
#side2 {
margin-left: 355px;
background: url('right_image.gif') repeat-y;
/*image needs to be stretched to the correct length, same as center*/
}
#footer {
width: 100%;
height: 90px;
background: #FDE95E;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut id tortor eu nisl scelerisque euismod. Nulla facilisi. Nulla facilisi. Proin vel massa eu erat porttitor scelerisque. Aliquam vel massa quis libero convallis viverra. Pellentesque quis nibh eu nibh pulvinar varius. Vivamus elementum porttitor nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras adipiscing pede a velit. Quisque tellus lacus, pellentesque et, nonummy sit amet, adipiscing a, wisi. Nulla quis sem. Nam convallis eleifend sapien.</p>
<div id="footer"> Footer </div>
</div>
<div id="wrapside1">
<div id="side1">
Side column with fluid size, but equal to that of other side
</div>
</div>
<div id="wrapside2">
<div id="side2">
Side column with fluid size, but equal to that of other side
</div>
</div>
</div>
</body>
</html>