2 replies [Last post]
boristheblade
Offline
newbie
Last seen: 9 years 46 weeks ago
Joined: 2004-09-10
Posts: 2
Points: 0

I feel like I am kicking a dead horse - I am new to css and web design. I was told CSS is the way to go, but man there sure is a lack of consistent support between browsers... anyway - to my question..

I have a static centered 2 columns with a header layout. As you can see I have the parent divs at 100% height. I found this from a tutorial. Now any div within my #container div should be 100% of the viewport.

So I want my #nav div and #main div to take up 100% of view port regardless of how much content. The divs should always be the same height, right? Well - I am missing something because take a look at the following links on my site.

www.texasriptide.org - this home page should be 100%, but infact it is greater that 100% for some reason ( notice the scroll bar, but no content )

www.texasriptide.org/aboutus.php - this page, the #main div is taller than the #nav div and I cant figure out why this is...

Please offer suggestions!!!

html {
	height:100%;
}
body {
	text-align:center;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	height:100%;
}
#container {
	width:780px;
	margin-right:auto;
	margin-left:auto;
	margin-top:0px;
	top:0px;
	padding:0px;
	text-align:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	height:100%;
}
#nav {
	width: 179px;
	float: left;
	background: #ccc;
	background-image: url(../images/left.jpg);
	background-repeat: repeat-y;
	border-right:1px solid #000;
	height:100%;
}
#main {
	width:600px;
	float:left;
	background:#fff;
	height:100%;
}

**testing results differ with firefox and IE,

firefox just stops the main div short and the text just overflows on aboutus.php.

where as IE shows all the text in the div but the nav and main divs are not lined up.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 hours 48 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5085
Points: 2666

100% height div parent - need Guru

Hi boristheblade,
height is something that is always causing problems.
The best thing to do is experiment and test in multiple browsers.

Here are points things to get you started:
IE will expand the div or container to fit the contents.
Mozilla based browser will stop at the height specified and depending on overflow settings may just spill out the content.

Height set to 100% on the body is 100% of the viewable area not the content it contains.
min-height may be useful in mozilla based browsers but wont work in IE.

Try removing the height from container.

Hope that helps

Root
Offline
Enthusiast
Brighton UK
Last seen: 7 years 25 weeks ago
Brighton UK
Joined: 2004-09-08
Posts: 76
Points: 0

100% height div parent - need Guru

The reason for this is that a floated element is taken out of the document flow and the relationship with the parent in terms of passing height info begins to break down and it is inconsistent across platform. You might be better with position absolute., for the inner divs and position relative for the container. Then set the height.

No class, little style and a lotta division.