ansaurus

Question

how to combine fixed height header with flexible page layout

Answer 1

A:

I'm afraid it can't be done with pure CSS/HTML. I would be the happiest if I were wrong. There have been several related questions on SO (haven't read them all, some of them might touch slightly different problems):

There are various "solutions", but neither of them are perfect. Let me know if you figured out a better way to solve this.

David Hanak 2009-03-05 10:13:04

2009-03-06 05:58:03

Answer 2

+4 A:

At the risk of loosing my reputation.

I would suggest doing something like this:

<table style="height:100%;width:100%">
  <tr style="vertical-align:top;height:50px;background-color:#faa;">
    <td>Fixed</td></tr>
  <tr style="vertical-align:top;background-color:#afa;">
    <td>Flexible</td></tr>
  <tr style="vertical-align:top;height:100px;background-color:#faa;">
    <td>Fixed</td></tr>
  <tr style="vertical-align:top;background-color:#afa;">
    <td>Flexible</td></tr>
</table>

This will offend the layout v semantics purists, but it gets the job done and will save you days of messing around with divs and CSS.

P.S This is just an illustration, the styles should really be in an external style sheet and linked by element id's.

Noel Walters 2009-03-05 10:54:19

+1 Even though it may offend some purits, it's short, simple, readable, and will work in most browsers.

Tracy Probst 2009-03-05 18:54:15

Hello Noel,this was just what the doctor ordered.I'm glad you risked your reputation, because it does exactly what I want.I'll post the full solution to my problem, consisting of both your and my own approach as soon as I got my user id. Thanks! Jörg Schaper

2009-03-06 05:51:50

Thanks for the feedback Jörg. Looking forward to your full solution. ---- I generally try to avoid using tables for layout, but sometimes it can't be avoided. ---- Oh, and reputation schmeputation.

Noel Walters 2009-03-06 11:06:47

Answer 3

A:

The following does exactly what I want, which is:

page is exactly 100% in width and height
header and footer are fixed in height
all other elements are flexible in width and height
flexible sizes ares stated in amounts totalling 100%
static sizes are stated in pixels
no javascript needed for page load/resize
no css expressions needed for page load/resize
no ugly page repaint delay on page load event
no ugly page repaint delay on resize event
script for splitters will be simple because of 4) and 5)

<html>
  <style type="text/css" media="all">
    html,body,table,div{height:100%;width:100%;}
    html * {outline:0;border:0;margin:0;padding:0;border-collapse:collapse;border-spacing:0;}
    div{float:left}
  </style>
  <body>
    <table>
      <tr style="height:100px;background-color:red;"><td>Fixed</td></tr>
      <tr style="height:100%;"><td>
        <div style="width:25%;margin-right:-4px;background-color:green;">Flexible</div>
        <div style="width:8px;background-color:silver;cursor: e-resize;"></div>    
        <div style="width:50%;margin-right:-4px;margin-left:-4px;background-color:blue;">Flexible</div>
        <div style="width:8px;background-color:silver;cursor: e-resize;"></div>  
        <div style="width:25%;margin-left:-4px;">
          <div style="height:33.33%;margin-bottom:-4px;margin-top:-0px;background-color:green;">Flexible</div>
          <div style="height:8px;background-color:silver;cursor: n-resize;"></div>          
          <div style="height:33.33%;margin-bottom:-4px;margin-top:-4px;background-color:blue;">Flexible</div>
          <div style="height:8px;background-color:silver;cursor: n-resize;"></div>          
          <div style="height:33.33%;margin-bottom:-0px;margin-top:-4px;background-color:yellow;">Flexible</div>
        </div>
      </td></tr>
      <tr style="height:20px;background-color:red;"><td>Fixed</td></tr>
    </table>
  </body>
</html>

This solution was made possible by the help of Noel Walters (table approach), and myself (divs with negative margins). Thanks Noel. Wasn't able to vote your answer up, though, as I still haven't received conformation for my user id!

I'd liked to have done this via divs and css only just like David suggested, but as stated in my original post I just wasn't "able". Will read the links that you suggested, and let you know about the "perfect" solution in case I manage to work it out. Thanks for those links, Dave.

New minor problem: splitters need to be 4px wide/high, and they are. Curiously enough, I had to use 8px for the splitters, and -4px * 2 for negative margins of surrounding elements, though. Any suggestions?

2009-03-06 08:04:17

Answer 4

A:

Well this is the same never-ending-story about tables vs. css for layout. CSS purist would even say CSS layouts are faster to download? faster to be rendered by the browser? less code??? In real life, and having the "visual" styles in a proper CSS sheet, table layouts have much less characters than doing the same with CSS. Dont believe it? Just try to do a full browser height, fixed width, horizontally centered, header/2 columns content/footer simple layout with CSS and with tables... get the code, paste in Word and do a word count. CSS code is no shorter than x2 times bigger than the table code! Tell me, how many CSS stuff do you need to do to replicate a 100% width 100% height text in the middle of the screen layout, simple as:

Some text

or

{ margin:0px; padding:0px;
}

html, body { height:100%; min-height: 99%; }

.test { border: 1px solid #cccccc; height:100%; position:relative; }

.test2{ display:inline; height:24px; width:24px; left:50%; top:50%; }

test

So CSS is better for layout because what? Easier to maintain? Tell me how many times would anyone tweak the layout of a page when is completely finished and working? Unless no wife/husband at reach :D Less code? yeah right, "more" is "less" right, like 1 is 0? Better design/code separation? Sure, your design do not need those DIVs or SPANs or P or whatever tags you want.

I always think: use hybrid code for do whatever you want in less time to render the way you want, no matter if css or tables or css + tables! For me, tables as for layout are the best, css for optimizing and rendering visuals. At the end, clients wont care a cucumber if their sites are made with css or with tables or with wood and nails. :) Tell me a good reason why should I use a pure CSS approach to get say a 3 columns totally centered by the width, fixed middle column, full browser height WITHOUT having CSS tweaks, fixes, hacks... everybody working really into website creation knows tables rendering is more visual consistent and less code needed than CSS among all the browsers around.

Quick test :) test would this work alone??

2009-05-10 21:51:02

ansaurus

tags:

views:

answers:

how to combine fixed height header with flexible page layout

Problem: how to combine fixed heights with flexible page layout?

related questions