[RESOLVED] div tags and css

[chris1990]

How can i make a div tag eg.'left-menu' the same size as the container eg.'content'. I am unable to fix height of the 'left-menu' tag as the 'content' tag needs to change as content is added on seperate pages.

I've tried auto, but that only seems to make it as big as the list of links, were i would like the height to equal that of the containing div tag.

I've also tried inherit but it seems to inherit 'auto' as its value rather than the actual height of the container.

I dont have the code with me at the moment as im at work, but if needed i will post it when i finish.

thanks

[stlaural]

I know you can do it using JQuery. Not sure if this is an option for you though.
I use it in an ASP.net Project for layout purpose.

The code bellow for example would align Element1's top left corner with Container's top left corner and Element2's top right corner with Container's top right corner. Then Contaner's width is ajusted to fit Table1's width.

Note that all elements are accessed by ID, so you need to set those element's ID in your HTML.

$(document).ready(function() {
    $("#Element1").position({
        my: "left top",
        at: "left top",
        of: $("#Container")
    });
    $("#Element2").position({
        my: "right top",
        at: "right top",
        of: $("#Container")
    });
    $("#Container").width($("#Table1").width());
});

Hope this can help you.

[chris1990]

sorry, i should of stated im using html and css, thanks anyway

[SambaNeko]

This is one of those unfortunate HTML/CSS things for which there is [currently] no "natural" solution; you'll have to fake it, and there are a few options:

My usual choice is to wrap both divs in a containing div, and then to place a vertically-repeating background image on that parent div. This makes it appear as though the left div goes as far down as the content div.

You can also use Javascript to equalize the div heights after the page is loaded (you've said you don't want Javascript, but if you change your mind, we can help).

Or you could use a table, since <td> cells in a single row are always stretched to equivalent height. You might incur some scorn if you choose this option though, as using tables for layout is bad practice.

[chris1990]

I'll try the repeating image first when i get home in an hour, if i cant get it to work ill try the javascript option. I was wondering if in css you could put something like left-menu:height = container:height like u can in vb6.

Would using javascript bloat my page and affect my seo rating, or is the code you've provided all i need.


i found this link, which ill try as well
http://www.tutwow.com/tips/quick-tip-css-100-height/

[SambaNeko]

I was wondering if in css you could put something like left-menu:height = container:height like u can in vb6.

No, that won't work; CSS can't do dynamic assignment (aside from an inadvisable IE-only method). If you choose to give your elements a static height though, you can set them both to that height.

On using Javascript - will it bloat your page? Not by a significant amount. Will it affect your SEO rating? Not really; making changes to content via Javascript may negatively effect a page's SEO, but what you're changing is appearance.

You'll also want to keep in mind that users can disable Javascript (though it is rare for the average user to do so), and that it doesn't take effect until the page is fully loaded (if you have a large, slow-loading page, you'll have to wait for the JS change).

As for the code, the Javascript that stlaural posted seems inappropriate; what you want is to simply equalize the heights of the two elements:

<script type="text/javascript">
<!--
window.onload = function(){
  document.getElementById('left-nav').style.height = document.getElementById('content').offsetHeight +'px';
}
//-->
</script>

This is assuming that your left nav div has an ID of "left-nav" and your content div has an ID of "content".

i found this link, which ill try as well
http://www.tutwow.com/tips/quick-tip-css-100-height/

It could work, but if you look at the comments following the article, you'll see there's a problem with scrolling.

[chris1990]

I went with your javascript (SambaNeko), it now leaves a gap on my other div tag, i tried adding a line to your code so it would work on both elements and still the same problem but on the leftnav div tag. I also tried to change the containing divs bg color but it still showed white.

i thought it would be easier to show you than tell you my results
http://car2000heywood.site11.com/about.html

[SambaNeko]

You should change the script to...

<script type="text/javascript">
<!--
window.onload = function(){
  document.getElementById('contentleft').style.height = document.getElementById('contentright').offsetHeight +'px';
}
//-->
</script>

The 'fixedcontent' div contains the 'contenttop' div, so its height is equal to the height of 'contentright' plus the height of 'contenttop'. You only want to use the height of 'contentright'.

[chris1990]

I tried figuring it out for about 2-3 hr's with no avail,

thanks