CSS Layout with Pixel And Percents

Question

I have a div which contains two nested divs, one that specifies a height of 65 pixels (header), the other which specifies the height as 100% (content) and it is supposed to take the rest of the space veritically. When the page renders, there is a scrollbar on the right because of the height specified of 65 pixels of the header.

What am I doing wrong mixing percents and pixels? I must be missing something. How do I fix this so the content section uses the rest of the page space and I do not have a scroll bar?

Here is the ASP .NET markup and CSS I am using:

<div>
    <asp:ScriptManager ID="ScriptManager1" runat="server"/>
    <div id="header">
        <div style="float: left; height: 100%"><img align="top" alt="" src="~/images/Logo.gif" runat="server"/></div>
        <div style="float: right; height: 100%">
            <div id="outer" >
                <div id="middle">
                    <div id="inner">
                        <asp:Label runat="server" ID="ApplicationName" Text="Application" CssClass="appname"></asp:Label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="content">
        <ig:WebSplitter ID="WebSplitter1" runat="server" Height="100%" Width="100%" 
            DynamicResize="True" CssClass="junk">
            <panes>
                <ig:SplitterPane ToolTip="Navigation Pane" runat="server" Size="20%" CollapsedDirection="PreviousPane" Locked="true">
                    <Template>
                        <asp:ContentPlaceHolder ID="NavigationPlaceHolder" runat="server">
                            <ig:WebDataTree ID="NavTree" runat="server" EnableHotTracking="true" 
                                Height="100%" OnNodeClick="NavTree_NodeClick" SelectionType="Single" 
                                InitialExpandDepth="1"
                                Width="100%" BorderWidth = "0px"
                                EnableAjax ="true">
                                <AutoPostBackFlags NodeClick="On" NodeCollapsed="Off" NodeExpanded="Off" NodeEditingTextChanged="Off" />
                            </ig:WebDataTree>
                        </asp:ContentPlaceHolder>
                    </Template>
                </ig:SplitterPane>
                <ig:SplitterPane Tooltip="Content Pane" runat="server" Size="80%">
                    <Template>
                        <asp:ContentPlaceHolder ID="SiteContentPlaceHolder" runat="server"/>
                    </Template>
                </ig:SplitterPane>
            </panes>
        </ig:WebSplitter>
    </div>
</div>   

html
{
    padding: 0px;
    margin: 0px;
    border: none;
    width: 100%;
    height: 100%;
    font-family: verdana;
    font-size: x-small;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    text-transform: none;    
    float: none;       
} 

body
{
    border: none;
    padding: 0px;
    height: 100%;
    width: 100%;
    border: none;
    margin: 0px;
}

form 
{
    border: none;
    margin: 0px; 
    padding: 0px; 
    border: none; 
    height: 100%; 
    width: 100%;
}

span.appname
{
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18pt;
    font-weight: bold;
    font-style: normal;
    color: #FFFFFF;
    padding-right: 10px;
}

#header 
{
    background: #295984;
    width: 100%;
    height: 65px;
    overflow: hidden;
}

#content
{
    display: inline;
    width: 100%;
    height: 100%;
}

#outer {height: 100%; overflow: hidden; position: relative; width: 100%;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%; width: 100%; text-align: center;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}

#inner {position: relative; top: -50%; text-align: right;} /* for explorer only */
#inner {width: 100%; margin-left: auto; margin-right: auto;} /* for all browsers*/
#inner[id] {position: static;}

Answer 1

The simplest solution is to move your header into your content...then it will take up space within the content block, rather than above it.

If that is not an option, there are a variety of solutions that could solve the problem. Here is a list of a few:

1) Absolutely position the header, with z-index of say 10. Give the content div a padding-top of 65px, with a z-index of 1. The header should cover the upper padded area of the content div. This will work great with very rigid designs that don't have any dynamic widths that grow/shrink with the width of the browser window.

2) Explicitly position the top, left, bottom, right of your content div. Specify no width or height. In this case, the top, left, bottom, and right are calculated based on the inner padding edge of the containing block of the content div. Again, this works great in rigid site designs. Should work in IE7/8, but will be problematic with IE6 and earlier.

3) Use a negative top margin og -65px on the content div. Use a top padding of 65px to compensate. This can be problematic with IE7 and earlier, and sometimes FireFox gets wonky with negative margins. There are hacks that can solve the problem, just search the net. This should work for rigid or fluid layouts.

There are a lot of resources for CSS design on the net. If the above options do not work, some searches on the net should bring up some resources.

Answer 2

Try reading this article first... it is about Conflicting Absolute Positions in a CSS template and somehow it addresses the kind of problem you are talking about.

Answer 3

At the moment you have 2 divs with a total height of 100% + 65px so it should have a scrollbar

You can't really do what you are trying with just divs without resorting to css hacks. The simplest and most browser compatible way to do it would be to enclose it in a 2 row table. Set the table height to 100%, first td height to 65px, second td height not specified. Some people are against resorting to tables for layout but if you are going to use css incorrectly anyway then why not?

Although, it would be better to use a design just with one div above the other. Dynamically adjusting content to the browser doesn't work well anymore due to the wide varation of screen sizes.

Answer 4

(100% + N) > 100% - there's no such thing as "the rest of the space" in CSS unfortunately.

When you say 100% it means exactly that, so your best bet is going to be either jrista's options 2 or 3 (imho abs positioning is to be avoided). I also think you might want to google position:fixed.