Having trouble with Div heights

HTML & CSS
1

I’m creating a 2-column page, and I’m trying to get rid of the “double-scrollers” on my larger pages, but at the same time keep the heights even. I’ve looked around on the net, but nothing seems to work right for me. Here’s what I have so far, (at least the stuff that is pertinent to this):


body {
background-image: url('stained-glass-dark-background.jpg');
font-family: "Comic Sans MS", cursive, sans-serif, sans;
font-size: 15px;
text-align: center;
}
#container{
	margin: 0;
	padding: 0;
	height: 100%;
	position: relative;
	
}
#nav
{
	float: left;
	margin-left: 1%;
	margin-right: 1%;
	margin-top: 1%;
	margin-bottom: 1%;
	width: 15%;
	height: 170%;
	background-color:#ffffff;
	border:1px solid black;
	filter:alpha(opacity=70);
	opacity:0.7; 
	margin-bottom: 2%;
	text-align: left;
	overflow: auto;
	
}
#navlist{
	padding: 5%;
	margin-left: 1%;
	}
	#navlist li{
	list-style-type: none;
	}
	#navlist a:hover{
	color: red;
	}
	#navlist a:active{
	color: green;
	}

	


#content{
	float: left;
	margin-left: 1%;
	margin-right: 1%;
	margin-top: 1%;
	margin-bottom: 1%;
	width: 80%;
	height: 170%;
	background-color:#ffffff;
	border:1px solid black;
	filter:alpha(opacity=90);
	opacity:0.9;
	margin-bottom: 2%;
	overflow: auto;
}
2

" overflow: auto;" is causing your strollers, and why do you have a height of 170%?

3

I know thats what turns them on, but thats not the problem. The problem is that the site has 2 columns. One is a navbar that is the same on every page and the other is the content, which is bigger on some pages than others, I gave it the added height in an attempt to even them out.

It seems no matter what I do, the columns either are uneven or they’re even but with the scrollers

4

Hi,

You are going about this all the wrong way I’m afraid. First read the faq on 100% height (see faq link in my sig) as you can’t use it like that and then read my article about equal columns to understand the problems.

Here’s an example using the last method shown in the link above. You can read more on it from the link in [URL=“http://www.pmob.co.uk/search-this/absolute-columns3-hide.htm”]this demo.

It’s not that difficult but you need to have a good understanding of CSS concepts first before it starts to make sense.

Suffice to say that it’s best if you can avoid equal columns unless you are supporting only modern browsers (ie8+) and then you can use the display:table properties.

Don’t try and copy table layouts (equal columns) or other table specific behaviours but create css friendly designs instead.

There are some things css does well and some things it needs to be pushed into doing so the path of least resistance is usually the best.

5

With building any site you cant design on the basis that a nav column and a content column will always be the same size.
By “double scrollers” I assume you mean the browser default plus one that you think shouldn’t be there.

I am also assuming your container doesn’t seem to be ‘containing’ your content

Here’s where I have your problem completely wrong but this info may be helpful…

If you have a container that has floated elements inside it, the container sort of disregards it’s contents height and snaps back to a smaller size, with it’s content seemingly hanging outside of it.

You can fix this by not setting a height to the main container and applying ‘overflow:hidden;’ and as long as the container doesn’t have a set height nothing ill ever be hidden, viola.

you can also shorten your margin rules like this:
margin-left: 1%;
margin-right: 1%;
margin-top: 1%;
margin-bottom: 1%;
would be;
margin:1%;
or
margin:1% 1% 1% 1%;
the order this goes in is top right bottom left
margin:T R B L;

of course it would help if you could send us to an example of your markup/look you’re trying to achieve. Anyway I hope this was helpful.

6

Here’s the look I’m trying to get:

http://andrewmuck.webs.com/example.html

On the smaller pages, its not a problem, on larger pages, I get this:

Its the “scroll within the scroll”, I’m trying to get rid of.

Gypsy, as for that piece of JavaScript, would that work for an external sheet as well?

7

Aha! you need a pseudo nav bar look that up.

[Edit]

I just looked it up, not much help haha.

Basically both nav and content are contained in one div with a back ground image in place where the nav is.
This way, as the content expands it pushes the area of the container down also expanding the bg image (this should be repeated on the y-axis)
making it seem the nav bar is as long as the content area

8

So, if I understand that correctly from your site, the nav bar, should’ve been done like a “div within a div” and “floated” over?

I was talking about external stylesheets, no biggie. Tried the JS code and it did work and gave me what I was looking for, Thanks!

Other than the small amount of people who have JS disabled is there any other real advantage to using pure CSS?

9

Yes I don’t like those js equal columns as they make the page jump all around and you get this delay where things pop in and out.

It can usually be done with css anyway although it is a little more complicated so you have to decide for yourself.

What browsers support do you need? If you don’t need IE6 it can be simplified a bit.