How do I do a layout with 100% width minus padding on left and right?

T

Tony M

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
 
N

Neredbojias

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?
Click to expand...

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%.
 
T

Tony M

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%.
Click to expand...

Well, I followed your suggestions, and further changed my css so that
I set the margin instead of the padding and it works in IE, Opera and
Avant. However, Mozilla and Netscape still give me headaches. I
suppose the best I can do is to use browser detection code (though
even that isn't 100% foolproof) and have different css files.

Thanks for your help.

Tony
 
A

Alan J. Flavell

suppose the best I can do is to use browser detection code
Click to expand...

Heavens, no! If you had the skill and expertise to do that well (which I
freely admit I have not), you would be clever enough to solve the problem
with CSS alone.

I've seen countless attempts at browser detection. Every one of them was
fundamentally flawed. Many of them were worse than that.

If there's /really/ no other way (which, with some old browsers and
versions, was, I admit, inevitable for any serious work) then the kind of
approach shown in http://w3development.de/css/hide_css_from_browsers/ is
genial, in as much as it capitalises on known bugs in the browsers
themselves - so, everyone gets sent the same document (and it's
correspondingly cacheable) - your server has no need to know what browser
it's serving (so, cache proxies are no problem) - there's no need to
assume that every user has javascript enabled (which quite a few of them
surely haven't), and so: it hits every instance of the browser bug which
it targets, and causes no harm to the rest. Which is spot on.

So much for buggy browsers. But Mozilla, and other browsers based on it
(modern Netscapes, Firefox etc.) are pretty close to being specification-
conforming, so, if you can't get them to behave, you really shouldn't be
resorting to techniques intended for buggy browsers. At least, not until
Bugzilla tells you that indeed it's an acknowledged bug (of which there
now seem to be relatively few - compared to the considerable number of
non-bugs reported by well-intentioned but misguided authors when they
found Mozilla doing what they asked for, instead of what they hoped for!).

best wishes
 
B

Beauregard T. Shagnasty

Tony said:
I suppose the best I can do is to use browser detection code
(though even that isn't 100% foolproof) and have different css
files.
Click to expand...

I have never found that necessary. You must have some errors somewhere.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Aligned to the left 3
Help with Visual Lightbox: Scripts 2
How do I fix this issue in sqaurespace code block? 1
Interfering CSS 1
Help with my responsive home page 2
Gallery - mosiac/grid layout with filtering and information page popup 1
Having difficulty with the layout of these images / video for this web page 2
Working on mobile css menu with plenty of frustration! 2

Members online

No members online now.
Total: 103 (members: 2, guests: 101)
Robots: 483

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,817
Latest member
DicWeils

Latest Threads

Top