Force Div Height

[Trublu]

Is there a way to force a div to be a certain height?

For example, I have a website where I'm using two columns; one on the left for navigation, one on the right for content. I've looked at other resources, and have set html and body in my css to height: 100%.

That seems to help on a page where the content is shorter than the page length in the right column. However, when one needs to scroll to see content in the right column, the left column abruptly ends. Does anyone know how to fix this?

[Jordan]

I was having the same problem, and this is the best fix I could find for my setup. It's these endless and annoying problems that keep tables so popular.

positioniseverything.net/articles/onetruelayout/equalheight

Basically, put a container around the two columns and give it the overflow: hidden property. Then set the column's padding-bottom to a number large number and it's margin-bottom to its negative equivalent.

<div id="wrapper" style="overflow: hidden;">
    <div id="sidebar" style="padding: 0px 0px 1000px 0px; margin: 0px 0px -1000px 0px;">
        Content
    </div>
    <div id="content" style="padding: 0px 0px 1000px 0px; margin: 0px 0px -1000px 0px;">
        Content
    </div>
</div>

[Trublu]

Jan 11, 2010 21:52:51 GMT -8 Jordan said:

I was having the same problem, and this is the best fix I could find for my setup. It's these endless and annoying problems that keep tables so popular.

positioniseverything.net/articles/onetruelayout/equalheight

Basically, put a container around the two columns and give it the overflow: hidden property. Then set the column's padding-bottom to a number large number and it's margin-bottom to its negative equivalent.

<div id="wrapper" style="overflow: hidden;">
    <div id="sidebar" style="padding: 0px 0px 1000px 0px; margin: 0px 0px -1000px 0px;">
        Content
    </div>
    <div id="content" style="padding: 0px 0px 1000px 0px; margin: 0px 0px -1000px 0px;">
        Content
    </div>
</div>

I've come across this method as well; but it causes an issue in my content div, where I want the content there to overflow. If I apply the overflow: hidden to my wrapper, it hides the overflow that I want to show as well.

Jan 11, 2010 14:01:42 GMT -8 RedBassett said:

Jan 11, 2010 9:37:06 GMT -8 Trublu said:

Is there a way to force a div to be a certain height?

For example, I have a website where I'm using two columns; one on the left for navigation, one on the right for content. I've looked at other resources, and have set html and body in my css to height: 100%.

That seems to help on a page where the content is shorter than the page length in the right column. However, when one needs to scroll to see content in the right column, the left column abruptly ends. Does anyone know how to fix this?

Since (I assume) both DIVs are inside the body, don't set the body height (the taller div should define that height), but let both divs be 100% height in relation to the body.

I do already have both divs set to 100% height; if I remove the body 100% as well, it causes a problem on the page where the content does not reach 100% of the page on its own. Both the nav bar and content div just stop, because the browser only interprets 100% to be 100% of the space needed to show the content, not 100% of the page. (At least, that's what I'm seeing.) Even then, on the page where there is some overflow, the nav div doesn't reach 100% either, I have to set the background color of the wrapper to the color of my nav bar.

[Trublu]

I got fed up with the apparent inability to accomplish what I wanted (according to many many sites) so I'm redesigning with a horizontal menu instead. Now, however, I've a fresh set of issues with my font sizes.

Is there a way to get the font size to adjust to available space? I have to design for a rather odd screen size (1280x1024) but I need it to also look decent in 800x600. The font sizes for my header and menu then look great in the first, but then cause some serious wrapping when the window is re-sized to 800x600.

[Jordan]

Have you tried this approach yet?

www.tek-tips.com/faqs.cfm?fid=4537

It may be the easiest way to go since you will most likely be having to change other CSS rules as well down the road.

Just to add, it would probably be better to put the Javascript in your head tag, and then just do if statements for the screen resolution and then document.write() into the head tag. Just use <noscript> if they have Javascript disabled.

There may be a better way of doing this, but I'm just putting it out there.

[Charles Stover]

Set the font sizes via px instead of pt. Then they'll look the same on both screen sizes.

[Trublu]

Jan 23, 2010 10:13:16 GMT -8 Charles Stover said:

Set the font sizes via px instead of pt. Then they'll look the same on both screen sizes.

That's what I have them set as. Regardless, when I decrease the screen size, my menu gets larger. The rest of the font on the page remains proportional, it's just the menu. But, the position of the menu and also the text inside my header gets skewed with the change as well.

Jan 22, 2010 13:10:30 GMT -8 Jordan said:

Have you tried this approach yet?

www.tek-tips.com/faqs.cfm?fid=4537

It may be the easiest way to go since you will most likely be having to change other CSS rules as well down the road.

Just to add, it would probably be better to put the Javascript in your head tag, and then just do if statements for the screen resolution and then document.write() into the head tag. Just use <noscript> if they have Javascript disabled.

There may be a better way of doing this, but I'm just putting it out there.

This did the trick, and since it's only a fraction of people who don't use Javascript when viewing our site, it shouldn't be an issue. Thanks Jordan.

[Jordan]

Glad it worked out for you.