I am working on making a completely CSS-based layout. My objective is to be fluid vertically and not use any tables for the layout. I am doing this by having a y-repeating background image inside a <div> tag, which expands down as content fills it.
I got everything right, but have a problem where the left sidebar column might be shorter or longer than the content column; thus, creating a white block below it to the footer.
My question is, can I somehow use JavaScript to force both columns to have the maximum height that the content allows; another words, so I don't see any white blocks below either column due to one column having more content (being longer).
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {margin:0px; padding:0px; font-family:"Times New Roman", Times, serif;
font-size:13px;
color: #000066; font-stretch: extra-expanded;}
h2 {font-size:15px; color:#000066;}
h1 {font-size:16px; font-variant:small-caps; font-stretch:extra-expanded; font-weight:bold; padding:0px; margin:0px;}
th { font-weight:bold; color:#CCCCCC; font-size:15px; padding:0px;}
a {color:#4A215C; font-weight:bold;}
#wrap {width:875px;}
#header {background: #369;}
#logo {float:left; width:309px; height:239px; background-image: url(images/logo.jpg);}
#logo h1 {text-indent:-8000px; margin:0px; padding:0px;}
#globalnavi {background-image:url(images/globalnavi.jpg); width:566px; height:36px; float:left; }
#topContent {float:left; width:566px; height:203px; background-image:url(images/topContent.jpg);}
#topContent span { display:block; padding-left:10px; padding-top:10px; padding-right:10px; text-align:justify;}
#content { background-image:url(images/rightBG.jpg); background-repeat:repeat-y; float:left; width:678px; margin-left:0px; height:500px; display:block;}
#sidebar {background-image:url(images/leftBG.jpg); background-repeat:repeat-y; width:197px; float:left; margin-right:0px; clear:both; display:block; height:500px;}
#footer {background: #cc9; clear:both; width:875px; height:29px; background-image:url(images/footer.jpg);}
#footer span { display:block; padding-left:5px; padding-top:5px;}
</style>
<script type="text/javascript">
document.getElementById("content").style.height = "S";
</script>
</head>
<body>
<div id="wrap">
<div id="header"><span id="logo"><h1>Lorem ipsum dolor</h1></span></span><span id="globalnavi"></span>
<span id="topContent"><span><h2>Lorem ipsum dolor</h2><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p></span></span></div>
<div id="sidebar"><span><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p></span></div>
<div id="content"><span><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p></span></div>
<div id="footer"><span>Lorem ipsum dolor</span></div>
</div>
</body>
</html>
I'm very novice when it comes to JavaScript. :-(
I got everything right, but have a problem where the left sidebar column might be shorter or longer than the content column; thus, creating a white block below it to the footer.
My question is, can I somehow use JavaScript to force both columns to have the maximum height that the content allows; another words, so I don't see any white blocks below either column due to one column having more content (being longer).
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {margin:0px; padding:0px; font-family:"Times New Roman", Times, serif;
font-size:13px;
color: #000066; font-stretch: extra-expanded;}
h2 {font-size:15px; color:#000066;}
h1 {font-size:16px; font-variant:small-caps; font-stretch:extra-expanded; font-weight:bold; padding:0px; margin:0px;}
th { font-weight:bold; color:#CCCCCC; font-size:15px; padding:0px;}
a {color:#4A215C; font-weight:bold;}
#wrap {width:875px;}
#header {background: #369;}
#logo {float:left; width:309px; height:239px; background-image: url(images/logo.jpg);}
#logo h1 {text-indent:-8000px; margin:0px; padding:0px;}
#globalnavi {background-image:url(images/globalnavi.jpg); width:566px; height:36px; float:left; }
#topContent {float:left; width:566px; height:203px; background-image:url(images/topContent.jpg);}
#topContent span { display:block; padding-left:10px; padding-top:10px; padding-right:10px; text-align:justify;}
#content { background-image:url(images/rightBG.jpg); background-repeat:repeat-y; float:left; width:678px; margin-left:0px; height:500px; display:block;}
#sidebar {background-image:url(images/leftBG.jpg); background-repeat:repeat-y; width:197px; float:left; margin-right:0px; clear:both; display:block; height:500px;}
#footer {background: #cc9; clear:both; width:875px; height:29px; background-image:url(images/footer.jpg);}
#footer span { display:block; padding-left:5px; padding-top:5px;}
</style>
<script type="text/javascript">
document.getElementById("content").style.height = "S";
</script>
</head>
<body>
<div id="wrap">
<div id="header"><span id="logo"><h1>Lorem ipsum dolor</h1></span></span><span id="globalnavi"></span>
<span id="topContent"><span><h2>Lorem ipsum dolor</h2><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p></span></span></div>
<div id="sidebar"><span><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p></span></div>
<div id="content"><span><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p></span></div>
<div id="footer"><span>Lorem ipsum dolor</span></div>
</div>
</body>
</html>
I'm very novice when it comes to JavaScript. :-(
