|
|
Posted by whytwelve13 on 09/04/06 02:20
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!
Navigation:
[Reply to this message]
|