Fixed width & dynamic height for a div in Fluid layout

Question

I am working on a fluid layout for a application where i want a fixed width & dynamic height of a div according to content of the parent div. Basically, i have a side navigation(side_nav) and 'data' div(app_forms) area where side navigation is having fixed width of 124px and remaining body area defined in %.

I am having 2 issues

Side nav height is not getting increased according to 'app_forms' div height
'apps_forms' div is breaking down when browser resized

Can someone help me on this, i have fiddled this.

http://jsfiddle.net/y42F9/

<div class="app_body">

   <div class="side_nav">
        <ul>
         <li ><a href="#" >Environments</a></li>
         <li class="events"><a href="#">Events</a></li>
         <li class="admin"><a href="#">Admin</a></li>
         <li class="help"><a href="#">Help</a></li>
       </ul>
  </div>

 <div class="app_forms">
     <div class="datagrid">datagrid area</div>
     <div class="info" >record info</div>  
 </div>

</div>

found the solution for my second issue: http://jsfiddle.net/y42F9/1/ — Ravi, Feb 06 '13 at 10:37
hey ravi still in town? please lemme know if my answer is what u were looking for.. or if there was something wrong with it — abbood, Feb 12 '13 at 03:55

score 3 · Accepted Answer · answered Feb 11 '13 at 10:37

look at my solution here: http://jsfiddle.net/MdT6d/ (feel free to resize browser window as you like)

html:

<div class="app_body">
    <div class="side_nav">
        <div>one</div>
        <div>two</div>
        <!-- as much content here as you want -->
    </div>
    <div class="app_forms">
        blah blah <!-- as much content here as you want -->     
    </div>
</div>
<div class="footer">footer</div>

css:

.app_body {
    width:100%;
    background-color: yellow;
}
.side_nav {
    width:122px;
    float:left;
    background-color: blue;

}
.app_forms {
    background-color: grey;
    margin-left: 122px;
}

.footer {
    height:38px;
    clear:both;
    background-color: red;
}

i stripped out the divs you added that weren't directly related to the question.. the trick is simply give app_body a left margin that is equivalent to side_nav width..

basically the height of siden nav will be the same regardless of how much content you add to the app_body.. but then you can make it appear as if side_nav's height is expanding along with app_body's height.. you just give it a background color (or a background image that repeats along the y axis if necessary)..

also if you add more content to the the side_nav then it grows naturally as well.. if it out grows the height of app_body.. you can do the same trick with app_body.. basically wrap both side_nav and app_body with a wrapper div and give it the same bacgkround color as app_body (if necessary) to make it seem as if it's height is also growing along with side_nav

Fixed width & dynamic height for a div in Fluid layout

1 Answers1