|
|
Posted by Tony M on 09/07/05 03:00
Hi. I am a relative beginner at CSS, so bear with me.
I am designing a web site which has a standard layout for all pages.
The top portion of each page has a horizontal band which is 100% the
width of the window. This band contains contains a title logo and a
drop down menu. The bottom portion of each page contains a content
area where data entry forms and search results are displayed.
I would like the content area to also be 100% of the width of the
window, but in addition to have a little bit of padding on the left
and right hand sides. Many of my pages contain tables that I would
like to be the full width of the usable content area (i.e. 100% minus
the padding on the left and right).
I was trying the following CSS:
div.topbar {
position: absolute;
top: 0px;
width: 100%;
height: 50px;
background-color: #0000aa;
}
div.content {
position: absolute;
top: 50px;
width: 100%;
padding-left: 20px;
padding-right: 20px;
margin-left: 0px;
margin-right: 0px;
border-left: 0px;
border-right: 0px;
}
div.content2 {
padding-left: 20px;
padding-right: 20px;
margin-left: 0px;
margin-right: 0px;
border-left: 0px;
border-right: 0px;
}
The general layout of the pages is the following (excuse the
wrapping):
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>QMember Online</title>
<link rel="stylesheet" href="qmember.css" type="text/css"
media="screen">
</head>
<body>
<div class="content">
<div class="content2">
My uber-cool content goes here.
</div>
</div>
</body>
</html>
The above seems to only work in Mozilla and Netscape. Opera, Avant
and IE all make the page 100% the width of the window plus the
padding, the result being that the user has to scroll the screen
rightward to see the rightmost column of my 100% width tables. If I
remove the width: 100%; from the div.content class, then IE works ok,
but the other browsers are broken. I am vaguely aware-ish that IE has
problems with the so-called "box model", and that it behaves somewhat
differently from other browsers in this regard.
Is there a truly cross-browser compatible way to do what I wish?
Tony
[Back to original message]
|