Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Setting Equal CSS Float Column Heights

Status
Not open for further replies.
minthral

minthral

Programmer
Jun 2, 2006
2
0
0
US
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. :-(
 
Sort by date Sort by votes
Visit this site:


and take the JS code from either the homepage or the sitemape page (the latter is probably easier)

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Neat. Thanks!

I really need to learn JavaScript better. Every time I try writing custom code, I get error headaches. :(
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Limit rows based on column value
Replies
0
Views
47
TheLazyPig
TheLazyPig
waubain
  • Locked
  • Question
Syntax help to create values list for table column
Replies
1
Views
62
waubain
waubain
javierdlm001
  • Locked
  • Question
Can JS &amp; CSS code located remotely run locally? 1
Replies
2
Views
56
javierdlm001
javierdlm001
bluemask11
  • Locked
  • Question
jQuery hide div class if total equal to 0
2
Replies
23
Views
134
bluemask11
bluemask11
sirnose1
  • Locked
  • Question
Disable dynamically generated input type = checkbox in table column
Replies
4
Views
80
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top