Div dropping off page

When the browser window goes smaller than the “content” size, everything drops off the page. I have the leftnav set at 100% height and not sure if that is a factor.

Right now everything in the content area of the page is just one big image because it is easier to illustrate what the final will look like. I was trying different options all day yesterday but couldn’t get past this.

Here is a temp link of the page:
http://www.sunnyknoll.com/tdm/categories/athletic-sandbox1.html

I’m sure it’s due to the 100% height. So what you get is 100% height and no more. Do min-height 100% instead and 100% height on the body and html.

I had messed around with min height before and it didn’t work, although i hadn’t changed it only on body and html. So I gave it a try, I just changed the body and html to min-height: 100% and all it did was make it so the menu doesn’t go to the bottom of page. I still have the wrapping issue.

You have things REVERSED. It should be like this:

html, body{
height:100%; /give this elements height NOT min-height/
/overflow: hidden; get rid of the overflow hire or things will drop off/

}
#container {
height:100%;
/width:100% block elements are 100% width by DEFAULT, this is NOT NEEDED/
overflow: hidden; /*you can put the overflow hidden here if you need it to clear floated elements within #container */
}

Hope that helps.

Thanks for the explanation, that did help with the extra space at the bottom of the page, which is why I had the overflow hidden on html, body. So at least that is correct now.

I took the overflow:hidden out completely but the content inside the page is still disappearing if I shrink the browser window.

It’s just dropping to the bottom of the page because there’s not enough room for it. Do you want your whole site to sit on the left of the page? If so, set a width on the container, so that when the browser window gets too narrow, a scroll abr will appear instead of everything dropping.

By the way, height: 100% isn’t going to get you far. If you want a full height sidebar, give “faux columns” a try.

CRAP!!! My bad…
#container {
min-height:100%;/not height, sorry… that’s what i get for not paying attention when I type/

}

I have tried a width on the content area, that doesn’t create scrollbar, the image still disappears.
I do need both the top nav and left nav go to the edge of the screen, so they are both at 100%. Width and height respectively. I have removed the container to see if it did anything, and there is no change with it or without it.

Basic html:


<div id="container">
	<div id="header">
		<div id="logo">
			<a href="#" target="_blank"><img src="../img/TDM_logo.png"/></a>
		</div>
		<ul id="topnav">
		<li><a href="#">Services</a><a href="#">Sustainability</a><a href="#">BIM</a><a href="#">Design-Build</a><a href="#">Profile</a><a href="#">Contact</a></li>
		</ul>
	</div>
	<div id="sidebar">
		<ul id="leftnav">
		<li><div id="linksspacer"><a href="#">Higher Education</a><a href="#">K-12 Schools</a><a href="#">Athletic Facilities</a><a href="#">Child Development</a><a href="#">Technical/Industrial</a><a href="#">Office/Commercial</a><a href="#">Religious</a><br /><a href="#">Housing</a></div> </li></ul>
	</div>
<div id="content">
<img src="../img/athletic/althetic-full-page.jpg" width="943" height="605" />
</div>
</div>

And the CSS:


html, body{
	height:100%;
	line-height: 1;
	background: #fcfcfc;
}
#container {
	margin:0;
	height:100%;
}
#header {
     margin:0 auto;
     height:60px;
     width:100%;
}
#sidebar{
	float:left;
	margin:0 auto;
	height:100%;
	width: 147px;
}
#content{
	float:left;
	padding: 3% 0 0 10%;
	width:960px;
}

I may have to check out the faux columns if I can’t get this figured out. thanks for that link, I have used them in the past and forgot about them.

I appreciate you guys helping out since I have tried all my options!

Cough cough. I said three bits of code in the original responce. You still havent done them.

Sure I did. But I changed it back because min-height didn’t work. :frowning:

edit - I just tried it again and changed the ul#leftnav li and ul#leftnav to min-height and left the body, html 100%. The results are here:
http://www.sunnyknoll.com/tdm/categories/athletic-sandbox1.html

Put the min-height on the container and nothing else.

OK done.

These two are the only ones with % height anywhere.

html, body{
height:100%;
background: #fcfcfc;
}
#container {
margin:0;
min-height:100%;
}

Hi,

As already mentioned above you can’t use height:100% anywhere except on html and body and then you can only use min-height:100% on the main container and nowhere else. You only get one shot at the 100% effect and you can’t have multiple 100% high elements as css does not work like that (unless you use the display:table properties supported in ie8+). See the css faq on 100% height for more info on this.

To get your 100% high effect on the leftnav simply move the image form the nav and place it on the container (repeat-y) and then it will always be as high as the container.

Your anchors should be in individual list elements and not crammed together in one list element. Bare anchors are bad for accessibility as some screens readers will read them without pausing.

For your content just use a margin-left to clear the nav and then nest an inner floated element of 100% width to contain all the content and to stop any clearing issues.

Here is a quick revamp of the above.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TDM Architects | Athletic Facilities</title>
<link rel="stylesheet" href="../css/style-sandbox1.css" type="text/css" media="screen" />
<style type="text/css">
@charset "utf-8";
/* CSS Document */
/* reset css */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img, a img { border:none; }
/*end reset*/

html, body {
	height:100%;
	background: #fcfcfc;
}
#container {
	margin:0;
	min-height:100%;
	background:url('http://www.sunnyknoll.com/tdm/img/leftnav_bg.png') repeat-y 0 0;
}
* html #container { height:100% }
#header {
	margin:0 auto;
	height:60px;
}
#sidebar {
	float:left;
	width: 147px;
	padding:110px 0 1px;
}
#content {
	margin-left:160px;
	zoom:1.0;
}
#inner {
	float:left;
	width:100%;
	padding:20px 0;
}

#logo, #logo span, #logo b {
	height: 151px;
	width: 271px;
	position: absolute;
	left:0;
	top:0;
	cursor:pointer;
	overflow:hidden;
	font-size:65%;
}
#logo b {
	z-index:2;
	background:url(http://www.sunnyknoll.com/tdm/img/topnav_bg.png) repeat-x 0 0;
}
#logo span {
	left:0;
	top:0;
	background:url(http://www.sunnyknoll.com/tdm/img/TDM_logo.png) no-repeat 5px 5px;
	z-index:3;
}
#column1 {
	padding: 10px;
	float:left;
}
#column2 {
	padding: 10px;
	float:right;
}
ul#topnav {
	margin:0;
	overflow:hidden;
	width:100%;
	background:url('http://www.sunnyknoll.com/tdm/img/topnav_bg.png');
	height:60px;
}
ul#topnav li { display:inline; }
ul#topnav li a {
	padding:0 10px;
	color:#fff;
	font:16px Arial, sans-serif;
	/*text-shadow:#000 1px 1px 2px;*/
	font-weight:bold;
	text-decoration:none;
	float:right;
	height:60px;
	line-height:60px;
}
ul#topnav li a:hover { color: #eeb61b; }
ul#leftnav { width:147px; }
ul#leftnav li {
	margin:0;
	padding:0;
	float:left;
	width:145px;
}
ul#leftnav li a {
	margin: 20px 12px 0px 4px;
	color:#fff;
	font:14px Arial, sans-serif;
	font-weight:bold;
	/*text-shadow:#000 1px 1px 2px;*/
	text-decoration:none;
	float:left;
}
ul#leftnav li a:hover { color: #eeb61b; }
.test {
	display:block;
	margin:auto
}
</style>
</head>

<body>
<div id="container">
		<div id="header">
				<h1 id="logo"> <a href="#">TDM Architect,inc<b></b><span></span></a></h1>
				<ul id="topnav">
						<li><a href="#">Services</a></li>
						<li><a href="#">Sustainability</a></li>
						<li><a href="#">BIM</a></li>
						<li><a href="#">Design-Build</a></li>
						<li><a href="#">Profile</a></li>
						<li><a href="#">Contact</a></li>
				</ul>
		</div>
		<div id="sidebar">
				<ul id="leftnav">
						<li><a href="#">Higher Education</a></li>
						<li><a href="#">K-12 Schools</a></li>
						<li><a href="#">Athletic Facilities</a></li>
						<li><a href="#">Child Development</a></li>
						<li><a href="#">Technical/Industria</a></li>
						<li><a href="#">Office/Commercial</a></li>
						<li> <a href="#">Housing</a></li>
				</ul>
		</div>
		<div id="content">
				<div id="inner"> <img class="test" alt="test" src="http://www.sunnyknoll.com/tdm/img/athletic/althetic-full-page.jpg" width="943" height="605" /></div>
		</div>
</div>
</body>
</html>


Hope that helps :slight_smile:

I sincerely appreciate your help, and the explanation. The page works nicely and you saved me more hours of frustration.

I think my whole problem was that I was re-purposing the home page (full screen slider) to reuse the navigation and it didn’t conform to what I was trying to do but I did not know how to fix it. I should have just started the page over from scratch, which you kindly did for me.