HTML layout

[whytwelve13]

I was searching for a 'pure CSS' solution to the following problem for
several days. However, there seems to be no suitable solution, not to
mention cross-browser.

I want to make a page that has somewhat restricted "box" layout. Here
is the quick layout description:

----------------------
Logo| Menu
----------------------
Content
----------------------
Footer
----------------------

Logo should be on the left, fixed size (in pixels, not percents). Menu
should go to the right, have fixed height (also in pixels) and variable
width, which should change when the browser window is resized. Menu
should not go over the logo or into the content part, it should display
scroll bars or, better, clip the contents (like overflow: hidden).
Footer should be fixed to the bottom, 100% width. Content should be in
the middle. When the size of the content changes so it cannot fit
between header and footer, the scroll bar should be displayed on it or
, better, the contents can be clipped, but no scroll bars should appear
on the whole window (i.e. document body).

What I have concluded until now is that I can make something like:
<div id="whole">
<div id="header">
<div id="logo">Logo</div>
<div id="menu">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
<a href="#">Link4</a>
<a href="#">Link5</a>
</div>
</div>
<div id="content">
Content<br/>
<div id="footer">Footer</div>
</div>
</div>

with these styles:
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
}

#whole {
width: 100%;
height: 100%;
overflow: hidden;
}

#header, #logo, #menu {
overflow: hidden;
color: black;
}

#header {
background-color: #808080;
width: 100%;
height: 100px;
color: White;
}

#logo {
background-color: #ffffd0;
float: left;
width: 200px;
height: 100px;
position: absolute;
}

#menu {
background-color: #ffd0ff;
height: 20px;
text-align: right;
padding-top: 80px;
}

#content {
background-color: #d0ffff;
width: 100%;
padding-bottom: 500px;
}

#footer {
background-color: #404040;
width: 100%;
height: 25px;
bottom: 0px;
position: absolute;
}

However, there are two problems with these:
- bottom: 0px doesn't work well with IE (leaves a pixel on the bottom),
which is probably a separate problem,
- The bigger problem is that the contents go under the footer. Thus,
when the contents grow (e.g. you can just duplicate the
Content<br/>
line 100 times or so), it goes under the footer.

There are two solutions: use absolute CSS and a little of JavaScript or
use tables for the layout. Any pure-CSS solution that you can
recommend? Thanks!

 

[Travis Newbury]

I was searching for a 'pure CSS' solution...

I was searching for a URL...

 

[Greg N.]

When the size of the content changes so it cannot fit
between header and footer, the scroll bar should be displayed on it or
, better, the contents can be clipped, but no scroll bars should appear
on the whole window (i.e. document body).

Are you suggesting the content of your pages ("can be clipped") is less
important than the framework (header, footer, menu, etc.)?

 

[whytwelve13]

Are you suggesting the content of your pages ("can be clipped") is less

important than the framework (header, footer, menu, etc.)?

Greg, thanks for your reply.

My rationale:
Header with the menu and the footer will be very small (around 100px
together in height, 100% width). The reason I want this is primarily to
be able to have menu visible all the time. Content will not be big, so
clipping will not occur very often. For these times when it occurs
(e.g. when you resize your browser to be too small), I would still like
to have the menu available, rather then content. This way I hope people
will understand resizing browser to 100x100 pixels is not a good thing
(most of the times).

The important thing is that this is not really a "pure-HTML" site,
rather a small Web application. Thus, I think being able to reach
functionality in one click is more important then being able to reach
content itself (if you resized window to 100x100 pixels, then it's your
fault you cannot see it all). You can look at this like you look at
e.g. MS Word - you have menu, toolbars, ... that don't scroll when you
scroll your 500-page document and it doesn't matter - it is still good,
since content part is much bigger (or: big enough) then the menu and
other things together. Think about having to scroll up 200 pages,
select Edit/Paste and then going way down where you were, searching for
the pasted text.

Look at this Web application as if it was Word (or Outlook or
PowerPoint or such), but where content is really small (400 - 600px is
completely OK). There will be some fields in that part that should be
editable, you make changes, click here and there, but you might decide
you need to do something from the menu, quick.

Anyway, even with tables (i.e. non-CSS solution) I am having problems
making fixed-size header and footer (eg. 80px and 20px, respectively)
and having scroll bars on the content part (and have it occupy the
remaining of the area). I can get scroll bars on the body, but that
will not work as I planned (you could scroll the menu out of the
screen).

Hope I have explained my needs better this time. Do you agree or have
any other thoughts/better solutions? Do you think what I am trying is
not a good idea after all and, if so, what would be your solution?