• Locked
1 reply [Last post]
Sat, 2012-02-25 12:15
rickyspires
rickyspires's picture
Offline
newbie
london
Last seen: 8 years 8 weeks ago
london
Joined: 2010-12-20
Posts: 7
Points: 11

hello,

im having trouble with 100% height.

i want #left, #middle and #right to all be 100% height inside the #wrapper.

another problem is i my wrapper seems to disappear if i dont use float:left . i want to use margin: 0 auto;

thanks..

this is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>One Hundred Percent height divs</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%; /* this is the key! */
}
 
#wrapper{
border: 1px solid #ccc;
width: 980px;
background-color: #f9f9f9;
height:100%;
float: left;
}
 
 
#left, #middle, #right
{
position:relative;
text-align: left;         
*display: inline; 
vertical-align: bottom;
border: 1px solid #ccc;
}
 
/***************************************/
/******* SET FLOAT LEFT / RIGHT ********/	
/***************************************/
 
/*** SET LEFT ***/
#left{
float: left;
display: inline;
width: 200px;
height: 100%;
}
 
 
/*** SET MIDDLE ***/	
#middle {
float: left;
display: inline;
width:570px;
height: 100%;
}
 
/*** SET RIGHT ***/	
#right{
float: right;
display: inline;
width: 200px;
height: 100%;
}
 
p {padding: 5px;}
 
p.top {
margin-top:20px;
}
 
</style>
</head>
 
<body>
<div id="wrapper">
 
       <div id="left">
       <p class="top">some text some text some text some text some text some text some text some text some text</p>
       <p>some text some text some text some text some text some text some text some text some text</p>
       <p>some text some text some text some text some text some text some text some text some text</p>
        <p>some text some text some text some text some text some text some text some text some text</p>
	   </div>
 
       <div id="middle">
	    <p class="top">some text some text some text some text some text some text some text some text some text</p>
       <p>some text some text some text some text some text some text some text some text some text</p>
       <p>some text some text some text some text some text some text some text some text some text</p>
	   </div>
 
		<div id="right">
		<p class="top">some text some text some text some text some text some text some text some text some text</p>
       <p>some text some text some text some text some text some text some text some text some text</p>
       <p>some text some text some text some text some text some text some text some text some text</p>
		</div>
 
	<div class="clear"></div>    
</div>
 
</body>
</html>

Top
Tags:
Sun, 2012-02-26 20:34
#1
Design My CSS
Design My CSS's picture
Offline
Regular
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2012-02-23
Posts: 36
Points: 37

The only way I believe that

The only way I believe that this can be done is by using javascript. Nevertheless here is the code to make it work

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<script type='text/javascript'>
function load(){
document.getElementById('body').style.height = (window.innerHeight - 4) + "px";
}
</script>
<title>One Hundred Percent height divs</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
}
 
#wrapper{
border: 1px solid #ccc;
width: 980px;
background-color: #f9f9f9;
clear:both;
height:100%;
margin:0px auto;
}
 
#left, #middle, #right
{
text-align: left;         
vertical-align: bottom;
border: 1px solid #ccc;
}
 
/***************************************/
/******* SET FLOAT LEFT / RIGHT ********/	
/***************************************/
 
/*** SET LEFT ***/
#left{
float:left;
width: 200px;
height: 100%;
}
 
 
/*** SET MIDDLE ***/	
#middle {
float:left;
width:570px;
height: 100%;
}
 
/*** SET RIGHT ***/	
#right{
width: 200px;
height: 100%;
float:right;
}
 
p {padding: 5px;}
 
p.top {
margin-top:20px;
}
 
</style>
</head>
 
<body onload='load()' id='body'>
<div id="wrapper">
 
       <div id="left">
       <p class="top">some text some text some text some text some text some text some text some text some text</p>
       <p>some text some text some text some text some text some text some text some text some text</p>
       <p>some text some text some text some text some text some text some text some text some text</p>
        <p>some text some text some text some text some text some text some text some text some text</p>
	   </div>
 
       <div id="middle">
	    <p class="top">some text some text some text some text some text some text some text some text some text</p>
       <p>some text some text some text some text some text some text some text some text some text</p>
       <p>some text some text some text some text some text some text some text some text some text</p>
	   </div>
 
		<div id="right">
		<p class="top">some text some text some text some text some text some text some text some text some text</p>
       <p>some text some text some text some text some text some text some text some text some text</p>
       <p>some text some text some text some text some text some text some text some text some text</p>
		</div>
 
	<div class="clear"></div>    
</div> 
</body>
</html>

Hope this helps
Pete

Mod edit: Don't post off-topic links to your own site

Hope that helps!
Pete
www.designmycss.com

Top
  • Locked