July 31st, 2007, 01:41 PM
|
|
Registered User
|
|
Join Date: Jul 2007
Posts: 1
Time spent in forums: 47 sec
Reputation Power: 0
|
|
|
XHTML/CSS height
Hey guys.
I know i'm probably singing the same old song, but i need help with a certain layout i'm trying to do.
My problem:
I have two Div tags enclosed in a single div tag. The two children div tag float left and right respectively, and vary in height (depending on how much content is generated in them). What i want is for the two children div tags to be of the SAME height, which i guess would be the full height of their parent div tag.
i am trying to keep a XHTML 1.1 validation. I know i can accomplish the look i want with Tables, but i'd much rather use div tags. I also know i can do this by having javascript manually change the style.height's of both div tags to equal the larger of the two. I was wondering if anyone knew a way to get this look i want with maybe some div tag/css hacks or something of that sort.
I do not want the div columns to stretch the height of the page, just the height of the parent.
I've searched and tried tips/tricks on this forum and i don't think i'm doing them right (or maybe its just not possible).
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>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1">
<meta name="description" content="description">
<meta name="keywords" content="keywords">
<meta name="author" content="author">
<title></title>
<style type="text/css">
* {
margin:0pt;
padding:0pt;
}
body {
background-color:#fff;
}
#layout {
margin:0pt auto;
width:758px;
margin-top:10%;
overflow:hidden;
}
#header {
font:normal 8pt Verdana;
text-align:right;
width:100%;
}
#container {
height:100%
}
#leftside {
width:153px;
float:left;
height:100%;
background-color:#999;
position:relative;
}
#footer {
text-align:center;
margin-top:20px;
background-color:#00ff00;
font:normal 8pt Verdana, sans-serif;
}
#rightside {
width:605px;
float:right;
height:100%;
background-color:#CCC;
position:relative;
}
</style>
</head>
<body>
<div id="layout">
<div id="header">HEADER | LINKS | HERE</div>
<div id="container">
<div id="leftside">LEFT SIDE <br/>THIS IS <br /> WHERE NAV IS <br /></div>
<div id="rightside">RIGHT SIDE </div>
</div>
</div>
<div id="footer">
FOOTER
</div>
</body>
</html>
|
Dev Articles Community Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
