Auto height for content area

HTML & CSS
1

So, I’ve tried making the making the content area on a page adjust to the height of the content. I tried using the height property and setting it to 100% but it just messes up the page. I can only get the page to work if I use a set px height.

#MainContent {
width:1024px;
height: 100%;
background-color:#fff;
margin:0 auto;

}

Any suggestions?

2

Has anyone told you that your html is a disaster?

http://validator.w3.org/check?uri=http%3A%2F%2Fnewstartlaw.com%2F&charset=(detect+automatically)&doctype=Inline&group=0&verbose=1

Clean it up and the site might have a chance.

height:100% is not a valid value for height in this location; px would be. 100% of what? What are you trying to do?

Why is the footer floating beside that “New Start” message? A clue: your html is badly broken. Fix that, then call us back.

3

I don’t think its that bad. A lot of those error messages are related to code generated by wordpress. Well, if anyone is capable of helping then just let me know.

4

So, I’ve tried making the making the content area on a page adjust to the height of the content.

this happens by default. what is it that you really want to happen?

I tried using the height property and setting it to 100% but it just messes up the page.

Setting the height to 100% sets that element to the height of the PARENT element IF (and only if) that parent element has a set height. Also remember that 100% height will overflow or cause scroll bars if you ad vertical padding or margins on top of the 100% height.

In short, you need to declare a fix height somewhere , before you use %

Any suggestions?

5

Thanks for the response dresden_phoenix.

So, what I do want is the #BelowHeaders section to adjust according to the content within it.

So, I set the #MainContent height to 4000px which is what I had it at originally, but the problem is that I have too much blank space at that height. I need more height on some pages vs others. However, I’d just like it to adjust according to the content in the #MainContent area which is most likely dictated by the content in the

#MainLeftcontent {
width: 625px;
float:left;
padding-left:2%;

}

since the #RightNav height won’t change that much. However, just like you said ( dresden_phoenix)

Setting the height to 100% sets that element to the height of the PARENT element IF (and only if) that parent element has a set height.

the #rightNav is following the behavior and I’d like to do the same for the #MainLeftcontent as a whole.

#BelowHeaders {
background:url(“http://newstartlaw.com/wp-content/themes/New%20Start%20Law/images/bodybackground.jpg”);
width:100%;

}

#MainContent {
width:1024px;
height: 4000px;
background-color:#fff;
margin:0 auto;

}

#RightNav {
float:right;
background-color:#545454;
width:299px;
height:100%;
list-style-type:none;

}

6

Hey Brian, try removing the height from #MainContent and instead add this:

#MainContent {
  overflow: hidden;
}
7

what you want (technically) really cant be accomplished with divs/css. It’s not the way they work.

Now, what you want aestetically9 unless my understanding is off is EQUAL HEIGHT COLUMNS ( tongs of tutorials on that out there ) Basically there are TWO WAYS.

First we get rid of those height declarations, as i said before that not the way DIVs and CSS work.
then you create a SMALL bg graphic which you will assign to the container of both your divs, and repeat vertically. That really is the easiest way.

Another technique involves creating separate wrapping shells ( wrapped around ll your content) for each BG change as such:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
				.mainCont{background: #555; overflow:hidden;padding-right:250px;}
				.inner{ background:pink;   width:100%;}
				.left , .inner{float:left; width:100%;}
				.right{float: right; width:250px; margin-right: -250px; }
		</style>
	</head>
	<body>
		<div class="mainCont">
			<div class="inner">
				<div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
				<div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.	lore	</div>
		</div>
		</div>
	</body>
</html>

hope that helps

8

Well. the

#MainContent {
overflow: hidden;
}

worked for the most part.

I had to also apply the “overflow:hidden;” to the

#BelowHeaders {
background:url(“http://newstartlaw.com/wp-content/themes/New%20Start%20Law/images/bodybackground.jpg”);
width:100%;
overflow: hidden;

}

too.

However, it gives me a new issue with the #RightNav not filling its container which is the #MainContent. Why is that?

9

That’s the natural behvior of an element—to be just as tall as the content. The best option here is to use the faux column method to make it appear that the column is full height.

10

per Ralph’s recommendation:

add the following code to #MainContent


#MainContent {
    background-color:#fff;
    [COLOR="#FF0000"]background-image:url("../images/rightnav-bg.png");  /* you may have to adjust the path */
    background-repeat:repeat-y;
    background-position:right 0;[/COLOR]
    width:1024px;
    overflow:hidden;
    margin:0 auto;
}

and place this image in your images directory