Stylesheets - Can I set margins on a centred div and still use max-width?

Author

Can I set margins on a centred div and still use max-width?

Alan Silver

2006-05-18, 7:01 pm

Suppose I have a div that contains the content of my page. I would like
to have this div centred in the browser, with a (say) 10px margin on
either side. So far, no problem... (WARNING - the HTML and CSS that
follow are bare minimum code, so don't flame me for not setting the
colour etc!!)...

HTML...
<div id="stuff">
stuff goes here
</div>

CSS...
body {
background: white;
}
#stuff {
margin: 0 10px;
background: pink;
}

So far so good. What if I now want to add a max-width to #stuff? If I
do, then when the client area in the browser window gets bigger than the
max width set, the #stuff div ends up on the left side of the window,
with a 10px left margin and a right margin of the client width, minus
the div width minus 10px.

If I change the margin setting for the #stuff div to look like this...

margin: 0 auto;

then when the window is large, the div is nicely centred, but when it is
small, I don't get any margins at all around the div.

So, can I centre the div when the window is big, and still have the 10px
margin when it is small? I can do either one, but I can't work out how
to do both. TIA

--
Alan Silver
(anything added below this line is nothing to do with me)

Barbara de Zoete

2006-05-18, 7:01 pm

On Thu, 18 May 2006 18:24:25 +0200, Alan Silver
<alan-silver@nospam.thanx.invalid> wrote:

> Suppose I have a div that contains the content of my page. I would like
> to have this div centred in the browser, with a (say) 10px margin on
> either side.

> What if I now want to add a max-width to #stuff?

You could do something like:

<html>
<head>
<title>Page Title</title>
<style type="text/css">
html, body {
background:white;
color:black;
margin:0;
border:0;
padding:0; }

body {
padding:2em 3em; }

h1 {
color:maroon; }

div#stuff {
margin:1em auto;
border:solid white;
border-width:0 10px; }
</style>
</head>
<body>
<h1>Page Title</h1>
<div id="#stuff">
Stuff
</div>
</body>
</html>

By giving the div#stuff a border of 10px width that has the same colour as
is the background colour of its parent, it simulates some extra margin.

--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |

Alan Silver

2006-05-18, 7:01 pm

In article <op.s9q93ze4l8uz2z@zoete_b>, Barbara de Zoete
<trashbin@pretletters.net> writes
>
>
>You could do something like:
<snip>

Thanks for the suggestion. I actually found I could do it simply by
adding padding to the body. I never thought of that, but it basically
requires the content to keep a small distance from the edges of the
window, which was exactly what I wanted. I didn't need to muck about
with invisible borders, which was a good job as the real page as a
border set on that div already!!

Thanks again

--
Alan Silver
(anything added below this line is nothing to do with me)

2006-05-18, 7:01 pm

Alan Silver wrote:
> Suppose I have a div that contains the content of my page. I would like
> to have this div centred in the browser, with a (say) 10px margin on
> either side. So far, no problem... (WARNING - the HTML and CSS that
> follow are bare minimum code, so don't flame me for not setting the
> colour etc!!)...
<snip>

You don't actually need any divs at all for that. You already have two
containers to work with: html and body. Simply center <body> inside
<html> and you are done. See for example
<http://www.geocities.com/schools_ri...emo01/index.xml> - the gray
bars from each side is <html> with <body> width:80% centered. IMHO it
is much easier to maintain.

The relevant CSS in the sample is:

html {
margin: 0px 0px;
padding: 0px 0px;
width: 100%;
height:100%;
background-color: #DDDDDD;
}

body {
margin: 0px auto;
padding: 1em 3em;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px none #F5F5F5;
border-bottom: 1px none #F5F5F5;
width: 80%;
height: 100%;
font: 1em Verdana, Geneva, sans-serif;
color: #000000;
background-color: #F5F5F5}

Alan Silver

2006-05-18, 7:01 pm

In article <1147979910.123511.168620@j73g2000cwa.googlegroups.com>, VK
<schools_ring@yahoo.com> writes
>You don't actually need any divs at all for that. You already have two
>containers to work with: html and body.
<snip>

That's completely brilliant!! Thanks a lot for that, I'll have a play
and see if I can simplify the code.

--
Alan Silver
(anything added below this line is nothing to do with me)