• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 457
  • Last Modified:

Flexible CSS Layout

I'm trying to design a layout for an internal page, and need a hand with the CSS.  The overall flow goes something like this:

#header, 40px high and 100% width of the page
#navpanel, 150px width, 100% height (up to the #header div)
#contentpanel, should fill exactly the remaining space entirely.  Holds an iframe that should take 100% of #contentpanel's width and height.

The ideal goal here is to create a 3 pane layout with a header, and essentially a two column layout under it with a fixed width navigation panel and then the content panel, which should show the page linked to from the navigation panel, thereby giving the same effect as frames, but without the frames.

I already have the body set to no overflow to dump the scrollbars, and through various attempts I've gotten a few partially working scenarios, but I can't quite get this to work.  Notibly, when the #navpanel is in place I end up with the #contentpanel and it's iframe being 150 pixels to the left, but still 100% width of the page, so the right edge (and scrollbar) of the iframe are 150px off the window or screen.

I tried making the #navpanel a percentage layout but I am not really happy with the results.  I'm almost certain this can be done, and am willing to use a little JS if necessary, but would like a CSS based solution if possible to allow multiple CSS layouts to be selectable in the future.

My HTML:

<body>
    <div id="container">
        <div id="headerbar">
           Header content Here.....
        </div>
        <div id="mainpanel">
           <div id="navpanel">
           </div>
            <div id="contentpanel">
                <iframe id="mainframe" frameborder="0" src="/main.aspx"></iframe>
            </div>
        </div>
    </div>
</body>
</html>


And my CSS:


html, body {
      height: 100%;
      width: 100%;
}

body
{
    padding: 0px;
    margin: 0px;
    border: none;
    font-family: Arial, Veranda, Sans-Serif;
    font-size: 11px;
    overflow: hidden;
}

#container
{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#headerbar
{
    width: 100%;
    height: 40px;
    overflow: hidden;
    border-bottom: solid 1px #808080;
    background-repeat: no-repeat;
    background-color: #969696;
}
#navpanel  
{
    position: relative;
    width: 150px;
    height: 100%;
    margin: 0;
    padding: 0;
    float: left;
}

#mainpanel
{
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#contentpanel
{
    position: relative;
    width: 85%;
    height: 100%;
    left: 0px;
    right: 0px;
    float: right;
    clear: none;
}
#mainframe
{
    height: 100%;
    width: 100%;
    overflow: scroll;
}


I've tried messing around with float: and margin-left, but the result often is the content pane ending up down below the navigation pane.  Any ideas?
0
BladeTech
Asked:
BladeTech
  • 2
1 Solution
 
oceanbeachCommented:
Hello BladeTech,

If you can live with fixed column width, but percentage header height, this may work for you...

html, body {
height: 100%;
width: 100%;
overflow: hidden;
padding: 0px;
margin: 0px;
}
body{
border: none;
font-family: Arial, Veranda, Sans-Serif;
font-size: 11px;
}
#container{
position: relative;
height: 100%;
width: 100%;
}
#headerbar{
width: 100%;
height: 10%;
overflow: hidden;
border-bottom: solid 1px #808080;
background-repeat: no-repeat;
background-color: #969696;
}
#mainpanel{
position: absolute;
height: 90%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
padding-top: 10%;
bottom: 0;
left: 0;
}
#navpanel  {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 100%;
margin: 0;
padding: 0;
padding-top: 10%;
}
#contentpanel{
height: 100%;
position: relative;
overflow: hidden;
clear: none;
padding-left: 150px;
}
#mainframe{
height: 100%;
width: 100%;
overflow: scroll;
}
* html #mainframe { overflow: hidden; }

#navpanel  {
      position: absolute;
      top: 0;
      left: 0;
    width: 150px;
    height: 100%;
    margin: 0;
    padding: 0;
      padding-top: 10%;
}
#contentpanel{
    height: 100%;
      position: relative;
      overflow: hidden;
    clear: none;
      padding-left: 150px;
}
#mainframe{
    height: 100%;
    width: 100%;
    overflow: scroll;
}
* html #mainframe { overflow: hidden; }

I hope this helps!

oceanbeach
0
 
BladeTechAuthor Commented:
Excellent.  It actually doesn't even look half bad with a fixed height header, only a strange overlap when the window is sized way down, but not bad at all.  Definitely closer to what I was looking for, and I knew it could be done, just had a brain cramp.

Thanks much!
0
 
BladeTechAuthor Commented:
One small problem I do see in your solution, if you might be able to offer some advice, is that when the window is resized down sometimes the scroll bars keep the full width of the container and go off the window.  In IE, it does seem to do some auto adjustments after you resize that sometimes fixes it.. but in FF it seems to stay off the side.  Any ideas?  
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now