Hi,
Yes, this is yet another "switching from tables to divs for layout
purposes" post. I have been searching for the past few hours to find
what I'm looking for as I hate posting unnecessarily. I am a pretty
crap searcher but I'm kinda sure this hasn't been written about yet.
Please feel free to prove me wrong and link to a solution. Otherwise
I'd appreciate any advice you may have.
I have a situation where I have a window that has been spawned, which
is to display HTML content in a powerpoint-esque way, with header &
footer, a menu to the left, and an iframe (where the content is
loaded/progressed) taking up the rest of the space. It kinda looks like
this:
-------------------------------------
header (stays at X pixels high)
-------------------------------------
|
menu |
(stays | iframe
at | (takes up the rest of the
Z | space in the window, has
pixels | scrollbars turned on for
wide) | content that needs it)
|
|
|
|
-------------------------------------
footer (stays at Y pixels high)
-------------------------------------
(that was designed to look correct & line up using fixed-width font,
sorry if it didn't work. If you paste it into notepad you'll see what I
mean).
So ... the idea is that the footer is always supposed to be at the
bottom of the screen, always visible. The Menu & IFRAME fill out the
rest of the height between the header and footer, with the ability to
resize. If the content in the IFRAME is too long, then a scrollbar
appears between the header & footer (the scrollbars for the main window
are turned off). So far, this has all been easily accomplished with a
table (3 rows, first row header, second row 2 columns: one menu, one
iframe, last row footer). However, I'm following the trend of moving
away from using tables for layout purposes (partly because I need to
make this content w3c accessible), and I've started experimenting with
using DIVs and CSS to do the same thing.
However, I'm having problems with getting the page to appear correctly.
I have tried the following:
<html>
<head>
<style type="text/css">
div.container {
position:relative;
width:100%;
height:100%;
margin:0px;
}
div.content {
position:relative;
width:100%;
height:100%;
border:solid 1px gray;
}
div.header {
position:relative;
width:100%;
border:solid 1px blue;
}
div.footer {
position:relative;
width:100%;
border:solid 1px blue;
}
div.menu {
position:relative;
float:left;
width:190px;
height:100%;
margin:0px;
border:solid 1px red;
}
body {
margin: 0px;
}
#contentFrame {
width:100%;
height:100%
}
</style>
</head>
<body>
<div class="container">
<div class="header" id="header">header here</div>
<div class="menu" id="menu">menu here</div>
<div class="content" id="content"><iframe name="contentFrame"
id="contentFrame" src="about:blank" frameborder="0"></iframe></div>
<div class="footer" id="footer">footer here</div>
</div>
</body>
</html>
This looks horrendous in Firefox, and in IE it's all OK except for the
fact that it is more than 100% high. This is no doubt due to the fact
that I have 3 elements on top of each other, top & bottom have certain
height, middle has 100%, hence > 100% height.
So, if this makes sense, and there's some CSS I'm missing out that will
make it all work, then I'd love to hear from you. Or, if it's been done
already, I'd like to see it (and learn from it). Or, if it can't be
done, then I'll be proven wrong (I told someone "Surely we can
replicate this in CSS?").
Thanks in advance.
bj.
