Div on the right wont stretch with the page??

**drhowarddrfine** · Mar 14 '07, 03:23 PM

The height must be specified for a parent element and then the div can reference that and expand to 100% of the parent. iow, set your outer/parent div to the height you wish. If you want it to be 100% of the body, set both html and body to 100%. So body references html and "outer" references body. Now you can have your inner divs ref the outer one and set them to 100% of the outer div.

Code:

<!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">
		html,body{
			height:100%;
		}
		#outer{
			height:100%;
			background-color:#eee;
		}
		#left{
			height:100%;
			width:400px;
			float:left;
			background-color:#ddd;
		}
		#right{
			height:100%;
			float:left;
			width:200px;
			background-color:#ccc;
		}
	</style>
  </head>
<body>

<div id="outer">
	<div id="left">
		left
	</div>
	<div id="right">
		right
	</div>
</div>

</body>
</html>

**MarGera332** · Mar 14 '07, 03:54 PM

Hi drhowarddrfine

Thanks for the detailed reply. I have tried what you has said but it still will not flow with the page. I don't have a clue why it wont work, i have tried taking different line of code out, to make sure that there isn't any conflict, but nothing seem to make a difference, do you have any other idea's what it could be??

Thanks for your help :)

**drhowarddrfine** · Mar 14 '07, 04:43 PM

Then other factors in your code are playing into it and I can't help without a link or the complete code.

**MarGera332** · Mar 15 '07, 01:41 PM

Originally posted by drhowarddrfine

Then other factors in your code are playing into it and I can't help without a link or the complete code.

So would you need me to post the html code and the CSS code??

Thanks

**drhowarddrfine** · Mar 15 '07, 03:33 PM

Yes, but a link is preferred if the site is online.

**MarGera332** · Mar 16 '07, 11:10 AM

Originally posted by drhowarddrfine

Yes, but a link is preferred if the site is online.

Hey drhowarddrfine

Ok i put together a test page, to see if it is something to do with my code, but i got the same result, below is the HTML and the CSS.

If you could take a look that would be much appreciated.

Thanks

Code:

</head>

<body>

<div id="outline">

	<div id="left">
	
	<p>Here is some text, Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,
	Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here 
	is some text, Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is 
	some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,</p>

</div>

	<div id="right">Here
	
	<p>Here is some text, Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,
	Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here 
	is some text, Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is 
	some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,</p>
	</div>
</div>

</body>
</html>

Code:

<style type="text/css">
<!--

body {
	height: 100%;
	margin: 0px;
	padding: 0px;
}
#outline {
	position: relative;
	height: 100%;
	width: 900px;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#left {
	width: 500px;
	float: left;
	height: 100%;
	position: relative;
	font-size: 25px;
	margin: 0px;
	padding: 0px;
	background-color: #00CCFF;
}
#right {
	width: 300px;
	float: right;
	height: 100%;
	margin: 0px;
	padding: 0px;
	position: relative;
	top: 3px;
	background-color: #33CC99;
}

-->
</style>

**MarGera332** · Mar 16 '07, 11:44 AM

Ok i see that i didn't style the html, body just the body on that last example!

So i tried that again on my other web page, and sort of got the result i was after, the only problem that i had, is that i have two divs below the main outline div, and it pushed them over to the right, and extended to the bottom of the page!!!

**drhowarddrfine** · Mar 16 '07, 02:00 PM

Change your css to this:

Code:

* {
	margin:0;
	padding:0
}

html,body {
	height: 100%;
}
#outline {
	height: 100%;
	width: 900px;
	margin:0 auto;
}
#left {
	width: 500px;
	float: left;
	height: 100%;
	font-size: 25px;
	background-color: #00CCFF;
}
#right {
	width: 300px;
	float: right;
	height: 100%;
	background-color: #33CC99;
}

**MarGera332** · Mar 16 '07, 03:32 PM

Hey

I don't know why but that code will just not work on my main page, i got it working on my test page fine.

So i have found another way around it on the net. Basically you give the padding bottom a valve of say 2500 and you then give the margin bottom a negative value which is the same -2500, and then set the outer divs overflow to hidden, and fingers crossed it has worked a charm so far!!

Thanks for all your efforts with trying to help me on this matter, it is really appreciated :)

Div on the right wont stretch with the page??

Div on the right wont stretch with the page??

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment