Div bleeds below outerDiv if heght is 100% HELP

**Jimaras** · 03-06-2010, 06:14 PM

Hello,

I'm new to this forum and as "WEB Developer".
Actually I'm trying to be

My problem is, I'm creating a site that needs to have a column on the left and the heigh is 100% under the logo.

I'm trying to do this with CSS and I have a bleed at the bottom and I can not make it work.

I need to be 100% so if I resize the window so the left column takes the 100% of the space under the logo.

Thanks.

this is my HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="css/main.css" rel="stylesheet" type="text/css" />
	<title></title>
</head>
<body>
	<div id="outerDiv">
		<div id="outerCanvas">
			<div id="head">
				<div id="logo">
					Logo
				</div> <!-- END Logo -->
				<div id="outerBanner">
					words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words words and words and words 
				</div> <!-- END outerBanner -->
			</div> <!-- END Head -->
		</div> <!-- END outerCanvas -->
	</div> <!-- END outerDiv -->
</body>
</html>

CSS:

Code:

body {
	padding: 0px;
	margin: auto;
	font-family: "Lucida Grande", Verdana, Arial;
}

#outerDiv {
	position: absolute;
	max-height: 100%;
	max-width: 100%;
	margin: auto;
	min-height: 575px;
	min-width: 1024px;
	height: 100%;
	width: 100%;
	background-color: black;
}

#outerCanvas {
	margin-left: auto;
	margin-bottom: auto;
	margin-right: auto;
	margin-top: auto;
	background-color: white;
	height: 100%;
	width: 95%;
}

#head {
	height: 100%;
	background-color: #cccccc;
	width: 200px;
}

#logo {
	background-color: #009966;
	height: 100px;
	width: 200px;
}

#outerBanner {
	height: 100%;
	width: 200px;
	background-color: #9999ff;
	overflow: scroll;
}

**Raptur** · 03-07-2010, 06:14 AM

I don't know if this will help (I'm fairly new to CSS myself), but I made a couple of changes and it seemed to work.

On the CSS

Code:

body {
	padding: 0px;
	margin: auto;
	font-family: "Lucida Grande", Verdana, Arial;
}

#outerDiv {
	margin: auto;
	height: 100%;
	width: 100%;
	background-color: black;
}

#outerCanvas {
	margin-left: auto;
	margin-bottom: auto;
	margin-right: auto;
	margin-top: auto;
	background-color: white;
	height: 100%;
	width: 95%;
}

#head {
	position: relative;
	height: 100px; /*Changed the height to match the logo height*/
	background-color: #cccccc;
	width: 200px;
}

#logo {
	background-color: #009966;
	height: 100px;
	width: 200px;
}

#outerBanner {
        position: relative;
	height: 100%;
	width: 200px;
	background-color: #9999ff;
	overflow: scroll;
}

For the HTML I made one change

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="css/main.css" rel="stylesheet" type="text/css" />
	<title></title>
</head>
<body>
	<div id="outerDiv">
		<div id="outerCanvas">
			<div id="head">
				<div id="logo">
					Logo
				</div> <!-- END Logo -->
</div> <!-- END Head --> <!-- I moved the close of the header tag so you can build content into a separate container later -->
				<div id="outerBanner">
					words and words and words words and words and words words and words and words words 

and words and words words and words and words words and words and words words and words and words words and words and words 

words and words and words words and words and words words and words and words words and words and words words and words and 

words words and words and words words and words and words words and words and words words and words and words words and words 

and words words and words and words words and words and words words and words and words words and words and words words and 

words and words words and words and words words and words and words words and words and words words and words and words words 

and words and words 
				</div> <!-- END outerBanner -->
			
		</div> <!-- END outerCanvas -->
	</div> <!-- END outerDiv -->
</body>
</html>

I hope that helps; if it doesn't hopefully someone with more knowledge than me will know what to do >.>

**LadynRed** · 03-08-2010, 03:05 PM

You might want to try reading our Stickies - there is one there on using height:100%.

**Jimaras** · 03-08-2010, 05:37 PM

Thanks,
I appreciate