how to make right DIV the same height as the rest of page

A

Anonymous

Guest
I have been trying for over a week now and asked around but know one seems to know how I fix this one.

I a left, middle and right DIV, but the right one does not show at 100% like the left one does.

What do I change so it is the same height?

Without using Javascript.
Code: 
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body style="background-color: #ddd; height: 100%;">





<div id="outer" style="background-color: lightblue; margin: 0 auto; width: 600px; height: 100%; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em;">

<div id="head" style="background-color: #56D1AC; margin: 0 auto; width: 600px; text-align: center; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em;">
head
</div>

<div id="left" style="background-color: #56D1AC; float: left; margin: 0 auto; width: 100px; height: 100%; text-align: center;">
left<br><br>more text<br><br>more text<br><br>more text<br><br>more text<br><br>more text
</div>


<div id="mid" style="background-color: lightblue; float: left; margin: 0 auto; width: 400px; height: 100%; text-align: center; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em;">
mid<br><br>more text
</div>


<div id="right" style="background-color: #56D1AC; float: left; margin: 0 auto; width: 100px; height: 100%; text-align: center;">
right<br><br>more text
</div>

<br clear="all">


<div style="background-color: #ddd; text-align: center;">footer</div>

</div>





</body>
</html>
 
Yes I did do that but this made the whole page seem like it was 150% instead and the footer went below the screen view, even if there was no content in the divs.

I have created a better version of my test code to show content in the left and right to show that the center div never grows to the same height as the left and right divs.
Code: 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to our web site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"></style>

</head>
<body>

<div class="bodyContainer">


	
	<div class="menu">

		<div class="clearfloat"></div>

	</div>
<div class="clearfloat"></div>
	

<div class="leftSidePanel">
<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah

</div>

		
		<div class="mainContent">

		<div class="formWrapper">

		<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah

		</div>

		</div>
		

	<div class="rightSidePanel">
	<br><br><br><br>blah<br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah
	</div>

	
<br class="clearfloat">
<div class="footer">
some text
</div>








</div>


</body>
</html>
 
Hmm this seems a tricky problem.

Make sure that there is no top margin? Like using margin-top:0px;
Also set the z-index:99; to make sure there is no blank header or anything blocking the top of the div.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
14 Year Old Programmer & Graphic Artist, Confident and Courageous
 
mmm..

I do have margin: 0em auto; and margin: 0em; but only to have the div centered and text centered.

z-index ? what is that, i shall google it, but dont know what i place this.
 
Careful, make sure that margin is not holding the div shorter than it should be.

"z-index:" is to define the order in which the elements are displayed on the page.

For example

element 3 has a z-index of 3 and goes on top of all the others
element 2 has a z-index of 2 and goes below element 3
element 1 has a z-index of 1 and goes at the bottom.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
14 Year Old Programmer & Graphic Artist, Confident and Courageous
 
ok i sort of understand that, but the divs are not in any order like that i think?

ok what i am after is three divs side by side all the same height, no matter what the divs content. be it that div one has 4 lines of text, div 2 have 8 lines of text and div 3 has 12 lines of text. all of them will be the same height and have different coloured backgrounds.
 
Jason_C said:
footer went below the screen view
Click to expand...
Simple.
You used 100% height on the div before footer, which are under same parent div.
To be more specific, left/right/center divs already had height of 100% (full browser web page view height) and then you added foote, which increased whole document height over 100%.

Jason_C said:
margin: 0em auto; and margin: 0em;
Click to expand...
these don't affect top and bottom, so they're fine

1st version with 100% height in html tag looked just what you want with Chrome. Same with 2nd sample without any changes :oops:
Sorry, I'm to lazy to install other browsers on this computer for more testing :yawn:
 
Hi,

Try this:

#wrapper {
display: table; // See FelipeAls comment below
width: 300px;
}
#left {
display: table-cell;
width: 50px;
background: blue;
}
#right {
display: table-cell;
width: 250px;
background: red;
}
 
You must log in or register to reply here.
Back
Top