|
|
Posted by Neredbojias on 09/07/05 03:22
With neither quill nor qualm, Tony M quothed:
> 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?
Nope. You should use the "strict" doctype and only pad the inner
content div, not the outer. If you set the outer content div to
width:100% *and* pad it, it's effective width is >100%.
--
Neredbojias
Contrary to popular belief, it is believable.
Navigation:
[Reply to this message]
|