Div Child Height Same Height As The Father how to set child height to be the same..

mizako · September 5, 2005

I will try to explain myself as briefly as possible. I want have the next

xhtml squeletone:

<html>  <head>  </head>  <body>  <div id="container">    <div id="header">      <div id="searchEngine">        <!-- Search Engine Markup >      </div>    </div>    <div id="header2">    </div>    <div id="primarynav">        <!-- primary nav Markup >    </div>    <div id="content">        <!-- content Markup >    </div>  </div>  </body></html>

This is the css code applied to the previous markup:

#container {  position: absolute;  left: 50%;  width: 770px;  top: 20px;  margin-left: -385px;  background: #cccccc;}#primarynav {  position: relative;  width: 160px;  background: #333333;  margin: 0px;  padding: 0px;  float: right;}#header2 {  position: relative;  background: #999999;  height: 150px;  width: 40px;  float: right;}#header {  position: relative;  background: #999999;  height: 150px;  width: 570px;  float: left;  background: url(../images/background.jpg) top left no-repeat;}#content {  position: relative;  float: left;  overflow: auto;  background: #cccccc;  width: 570px;  margin: 0px;  padding: 0px;}

Right now i am obtaining the next output:

Posted Image

But i want to obtain an output in which the primary nav goes until the bottom of the container as shown in the figure:

Posted Image

Any idea how can i manage to do that with CSS?

Help is really, really appreciated.

arboc7 · September 5, 2005

I think I might know you may need to do in your CSS file.

I think you need to do something like this:

#primarynav {  height:100%;}

Please note that this may not be supported by all browsers. You may need to use various workarounds or "filters" which can be found here: http://forums.xisto.com/no_longer_exists/

Hope this helps!!

mizako · September 6, 2005

I think I might know you may need to do in your CSS file.

I think you need to do something like this:
#primarynav {  height:100%;}
Please note that this may not be supported by all browsers. You may need to use various workarounds or "filters" which can be found here: http://forums.xisto.com/no_longer_exists/

Hope this helps!!

182428[/snapback]

Thanks! it seems that the next code fixes the problem. However i remember me trying this before without success. Thanks again.

#container {... height: 100%;...}#primarynav {... height: 100%;...}

Sign In

Div Child Height Same Height As The Father how to set child height to be the same..

Recommended Posts

mizako 0

Share this post

Link to post

Share on other sites

arboc7 0

Share this post

Link to post

Share on other sites

mizako 0

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information