Jump to content
xisto Community
Sign in to follow this  
mizako

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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%;...}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.