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)
