Using Remaining Space with CSS

Question

I am trying to setup a website that consists of two main areas: navigation and content. The navigation portion needs to take up the full height of the left column. The main content will be in the left column. In an attempt to set this up, I'm using the following CSS:

<div class="full-height row">
  <div id="navDiv" class="four wide column full-height" style="background-color:#40546C;">
    <!-- Nav COntent goes here -->
  </div>

  <div class="eight wide column">
      Main Content
  </div>    
</div>

I've created a fiddle with the full example here. What I'm trying to do in the nav column is three things: show a title, have tabs aligned against the bottom of the screen, and have the tab content take up the remaining space. Unfortunately, I'm not having much luck in getting this working. Specifically, I'm having problems getting the tab content to fill up the remaining space and the tabs aligned against the bottom of the screen.

Your help is much appreciated!

Answer 1

For future reference, you should try to mention that you were using an external grid system. It took me a couple minutes to realize what was happening and why there were so many classes on things. Not a big deal though :-)

I think this new fiddle should be pretty close to what you're talking about, though: theFiddle

I first had to set the height of the body and html to 100% so that their children could be 100% as well. I then floated the navDiv left and gave it a width of 25%. You can tweak that width as needed.

#navDiv {
width: 25%;
float: left;
position:relative;
}

I then used absolute positioning to get the tabs at the bottom, and to get the tab content above the tabs.

I added new classes in several places to avoid collisions with the grid library. I also had to use an important to override the margins on the segment class, since I didn't want to remove anything that you were using in your grid.

There may be a way to to this layout using that grid more effectively. As I said, I'm not familiar with it so I just used plain CSS.

Just as an aside, this is one my favorite resources for brushing up on CSS Layout. Thought you might find it helpful: http://learnlayout.com/