Forum Moderators: not2easy
The middle column has a lot of content and keeps going down the page while the other two just stop, it looks very bad. :(
Any ideas?
tallis
and a warm welcome to these forums. ;)
I am not sure that this can be achieved using CSS.
But it can be done with javascript, which, of course,
may not be the solution that you require.
Here it is anyway. ;)
<!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" xml:lang="en" lang="en">
<head>
<title>div height controlled by javascript</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
html,body {
background-color:#eee;
margin:10px;
font-family:arial,verdana,helvetica,sans-serif;
font-size:16px;
color:#666;
}
#container {
width:747px;
margin: auto;
border:3px double #000;
}
#left {
width:247px;
float:left;
background-color:#fee;
border-right:3px double #000;
}
#left p,#right p {
margin:10px;
text-align:center;
}
#center {
width:247px;
float:left;
background-color:#efe;
border-right:3px double #000;
}
#center p {
margin:10px;
}
#right {
width:247px;
float:left;
background-color:#eef;
}
#clear {
clear:both;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
onload=function() {
document.getElementById('right').style.height=
document.getElementById('left').style.height=
document.getElementById('center').offsetHeight+"px";
}
//]]>
</script>
</head>
<body>
<div id="container">
<div id="left">
<p>left div</p>
</div>
<div id="center">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus. Integer massa
libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Suspendisse potenti. Nunc vulputate magna non magna. Aenean lorem eros,
adipiscing quis, semper non, dictum a, nunc. Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices.
Donec vulputate tincidunt turpis. Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet,
convallis a, accumsan vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar adipiscing,
est orci adipiscing felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna.
</p>
</div>
<div id="right">
<p>right div</p>
</div>
<div id="clear"></div>
</div>
</body>
</html>
birdbrain
I've had to put a couple of javascripts into my site now, and I honestly don't have the faintest idea how any of them work, it's something I'll have to look into when I'm more confident with css.
Can I ask if you know a way of adding a little more height to the left and right columns in addition to them matching the middle one?
I have a small header above my middle column, so while the two side ones are now the same height as the middle one, they don't quite reach the bottom of the page because of the header.
If not, thanks anyway for solving that one for me, I've been wrestling with it for hours. ;)
tallis
I've been looking around online for a while, but the solutions I've seen didn't work for me. I think I may have had too many other variables going on, but it's easy for me to get lost in it and forget what's happening with the code too.
Thanks for the link, it looks really groovy.
tallis
try this modification...
<!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" xml:lang="en" lang="en">
<head>
<title>div height controlled by javascript</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
html,body {
background-color:#eee;
margin:10px;
font-family:arial,verdana,helvetica,sans-serif;
font-size:16px;
color:#666;
}
#container {
width:747px;
margin: auto;
border:3px double #000;
background-color:#fff;
}
#left {
width:247px;
float:left;
background-color:#fee;
border-right:3px double #000;
}
#left p,#right p,#header p {
margin:10px;
text-align:center;
}
#head_and_center {
width:247px;
float:left;
}
#header {
width:247px;
height:50px;
float:left;
background-color:#ffe;
border-bottom:3px double #000;
}
#center {
width:247px;
float:left;
background-color:#efe;
}
#center p {
margin:10px;
}
#right {
width:247px;
float:left;
background-color:#eef;
border-left:3px double #000;
}
.clear {
clear:both;font-size:0px;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
onload=function() {
document.getElementById('right').style.height=
document.getElementById('left').style.height=
document.getElementById('head_and_center').offsetHeight+"px";
}
//]]>
</script>
</head>
<body>
<div id="container">
<div id="left">
<p>left div</p>
</div>
<div id="head_and_center">
<div id="header">
<p>header div</p>
</div>
<div id="center">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus. Integer massa
libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Suspendisse potenti. Nunc vulputate magna non magna. Aenean lorem eros,
adipiscing quis, semper non, dictum a, nunc. Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices.
Donec vulputate tincidunt turpis. Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet,
convallis a, accumsan vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar adipiscing,
est orci adipiscing felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna.
</p>
</div>
<div class="clear"></div>
</div>
<div id="right">
<p>right div</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>
birdbrain
I think I should be able to get some sleep now, this whole website thing is way too addictive when you hit a problem!
tallis
