Hi,
Can anybody tell me how I can get nested divs to stretch to the height of the parent div?
click here (<!-- m --><a class="postlink" href="http://www.halesowen.ac.uk/newlAyout/index.cfm">http://www.halesowen.ac.uk/newlAyout/index.cfm</a><!-- m -->)
It works fine in IE but not Firefox.
I also have the height attribute of the body tag set to 100%.
Hope you can helpyou could try this idea (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->)Hi Guys,
Has anyone else got any ideas for this? Its very fustrating as I cant get the divs to stretch to the bottom footer div:
<!-- w --><a class="postlink" href="http://www.halesowen.ac.uk">www.halesowen.ac.uk</a><!-- w -->
I need to get rid of that big white gap.
Thankyouno idea, but i really like your Wolverhampton Council site.Thanks mateYou need to clear your floats. Look in the stickies or google for that. FF is doing it properly. IE has a bug that stretches the divs. This is wrong and not to the standards.
Clearing floats. (<!-- m --><a class="postlink" href="http://bonrouge.com/br.php?page=floats">http://bonrouge.com/br.php?page=floats</a><!-- m -->)Great thanks, the page you supplied uses fixed heights though, I need to us %, any ideas?
The page doesn't work in both IE and FF.
ThankyouGreat thanks, the page you supplied uses fixed heights though, I need to us %, any ideas?
The page doesn't work in both IE and FF.
Thankyou
Maybe try using negative margins... or something like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>XHTML Layout w/css</title>
<style type="text/css">
div{ border: 1px solid black; display: block; background: #FFFFF0; }
div.nobord{ border: 0px none; }
div.hdr{ text-align: center; height: 80px; width: 80%; background-color: #FFB6C1; margin-left: 10%; }
div.capt{ width: 100%; top: 0px; margin: -1px; background-color: #B0E0E6; text-align: center; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; }
div.left{ width: 23%; height: 142px; left: 1%; position: absolute; }
div.middle{ height: 452px; top: 110px; left: 25.3%; position: absolute; }
div.right{ width: 23%; height: 142px; right: 1%; position: absolute; }
#lrow1{ top: 110px; }
#lrow2{ top: 265px; }
#lrow3{ top: 420px; }
#rrow1{ top: 110px; }
#rrow2{ top: 265px; }
#rrow3{ top: 420px; }
#mid_1{ width: 49%; }
</style>
</head>
<body>
<!-- Header -->
<div class="hdr">
<h1 class="hdr" id="hdr">HEADER</h1>
</div>
<!-- END Header -->
<!-- left Column -->
<div class="left" id="lrow1"><div class="capt">
Caption left 1
</div>
Content
</div>
<div class="left" id="lrow2"><div class="capt">
Caption left 2
</div>
Content
</div>
<div class="left" id="lrow3"><div class="capt">
Caption left 3
</div>
Content
</div>
<!-- END left Column -->
<!-- Center Column -->
<div class="middle" id="mid_1"><div class="capt">
Caption middle
</div>
Content
</div>
<!-- END Center Column -->
<!-- right Column -->
<div class="right" id="rrow1"><div class="capt">
Caption right 1
</div>
Content
</div>
<div class="right" id="rrow2"><div class="capt">
Caption right 2
</div>
Content
</div>
<div class="right" id="rrow3"><div class="capt">
W3C
</div>
<p style="padding: 5px; margin: 0px;">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://validator.w3.org/check?uri=http://jdgsoftco.no-ip.com/layout.htm">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" style="border:0;width:88px;height:31px" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fjdgsoftco.no-ip.com%2Flayout.htm">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" style="border:0;width:88px;height:31px" />
</a>
</p>
</div>
<!-- END right Column -->
<script type="text/javascript">
var IE4 = (document.all)? 1 : 0;
if(IE4){
document.getElementById("hdr").style.paddingTop= '22px';
document.getElementById("mid_1").style.width = '50%';
}
</script>
</body>
</html>
...OR try using two separate CSS files, one for IE and another for FF / others.
Can anybody tell me how I can get nested divs to stretch to the height of the parent div?
click here (<!-- m --><a class="postlink" href="http://www.halesowen.ac.uk/newlAyout/index.cfm">http://www.halesowen.ac.uk/newlAyout/index.cfm</a><!-- m -->)
It works fine in IE but not Firefox.
I also have the height attribute of the body tag set to 100%.
Hope you can helpyou could try this idea (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->)Hi Guys,
Has anyone else got any ideas for this? Its very fustrating as I cant get the divs to stretch to the bottom footer div:
<!-- w --><a class="postlink" href="http://www.halesowen.ac.uk">www.halesowen.ac.uk</a><!-- w -->
I need to get rid of that big white gap.
Thankyouno idea, but i really like your Wolverhampton Council site.Thanks mateYou need to clear your floats. Look in the stickies or google for that. FF is doing it properly. IE has a bug that stretches the divs. This is wrong and not to the standards.
Clearing floats. (<!-- m --><a class="postlink" href="http://bonrouge.com/br.php?page=floats">http://bonrouge.com/br.php?page=floats</a><!-- m -->)Great thanks, the page you supplied uses fixed heights though, I need to us %, any ideas?
The page doesn't work in both IE and FF.
ThankyouGreat thanks, the page you supplied uses fixed heights though, I need to us %, any ideas?
The page doesn't work in both IE and FF.
Thankyou
Maybe try using negative margins... or something like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>XHTML Layout w/css</title>
<style type="text/css">
div{ border: 1px solid black; display: block; background: #FFFFF0; }
div.nobord{ border: 0px none; }
div.hdr{ text-align: center; height: 80px; width: 80%; background-color: #FFB6C1; margin-left: 10%; }
div.capt{ width: 100%; top: 0px; margin: -1px; background-color: #B0E0E6; text-align: center; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; }
div.left{ width: 23%; height: 142px; left: 1%; position: absolute; }
div.middle{ height: 452px; top: 110px; left: 25.3%; position: absolute; }
div.right{ width: 23%; height: 142px; right: 1%; position: absolute; }
#lrow1{ top: 110px; }
#lrow2{ top: 265px; }
#lrow3{ top: 420px; }
#rrow1{ top: 110px; }
#rrow2{ top: 265px; }
#rrow3{ top: 420px; }
#mid_1{ width: 49%; }
</style>
</head>
<body>
<!-- Header -->
<div class="hdr">
<h1 class="hdr" id="hdr">HEADER</h1>
</div>
<!-- END Header -->
<!-- left Column -->
<div class="left" id="lrow1"><div class="capt">
Caption left 1
</div>
Content
</div>
<div class="left" id="lrow2"><div class="capt">
Caption left 2
</div>
Content
</div>
<div class="left" id="lrow3"><div class="capt">
Caption left 3
</div>
Content
</div>
<!-- END left Column -->
<!-- Center Column -->
<div class="middle" id="mid_1"><div class="capt">
Caption middle
</div>
Content
</div>
<!-- END Center Column -->
<!-- right Column -->
<div class="right" id="rrow1"><div class="capt">
Caption right 1
</div>
Content
</div>
<div class="right" id="rrow2"><div class="capt">
Caption right 2
</div>
Content
</div>
<div class="right" id="rrow3"><div class="capt">
W3C
</div>
<p style="padding: 5px; margin: 0px;">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://validator.w3.org/check?uri=http://jdgsoftco.no-ip.com/layout.htm">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" style="border:0;width:88px;height:31px" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fjdgsoftco.no-ip.com%2Flayout.htm">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" style="border:0;width:88px;height:31px" />
</a>
</p>
</div>
<!-- END right Column -->
<script type="text/javascript">
var IE4 = (document.all)? 1 : 0;
if(IE4){
document.getElementById("hdr").style.paddingTop= '22px';
document.getElementById("mid_1").style.width = '50%';
}
</script>
</body>
</html>
...OR try using two separate CSS files, one for IE and another for FF / others.