collapsing page margins

Hi,

I've looked around the site for this topic but I can't find it anywhere.

Sometimes I like to create a page/site which doesn't use up all of the horizontal space at a resolution of 1024x768. It has an equal margin on both sides. I would like to learn how to do something that I often see on the web.

Say you have a browser window which is not maximised but it almost fills the screen. Grab hold of the right hand border and gradually narrow the window. The left hand margin disappears until the left of the window hits the centrally placed content, as you continue to narrow the window the left margin begins to dissapear. Only once both margins have gone do you get a horizontal scrollbar. I think this is a really good bit of functionality but I have no idea how it is done.

Could anyone help me or push me in the direction of a resource that can?

Many thanks

Paul

I also love these flexible layouts I can teach you how to create them, but first I want to check that I understand your goals. Take a look at this site that I made, and tell me whether it's the sort of collapsing margins that you want:

http://www.badmintonbible.com

Would you be happy with those kinds of collapsing margins?

Hi Mike,

That is a great site but it isn't quite what I was meaning. What I was wanting is much simpler, I hope . The main content in the center wouldn't change, fixed scale but as you move the window in first the margin to the right of the main content would reduce until gone then the left margin would reduce until gone leaving just the main content. Only if the window was pulled narrower than the main content would this introduce the horizontal scrollbar. With a page like that I normally create the space to the right of the content would reduce until the main content was reached, at this point the scrollbar appears but as I reduce the width even further the content disappears before the left margin, I want both margins to go first.

Thanks for showing me the site.

I'm not sure how to make one margin disappear first (nor is this desirable, usually). But I can show you how to make the margins collapse together.

First, put your content in a containing <div id="content">.

Second, use CSS to set your <div> width in either px or em. Using % won't work. Third, centre your site by applying margin: 0 auto; to the <div>

Code: Select all

div#content {
width: 700px;
margin: 0 auto;
}

Hope that helps

Thanks Mike really appreciate that. I will try it out.

Let me know how you get on!

That worked a treat Mike and such small piece of code. The site is not on the server yet.

Thanks for your help, really appreciate your time.

Paul Rich

Excellent. Glad to help

For older browsers use

Code: Select all

body {
    text-align: center;
}

div#container {
    width: 700px;
    margin: 0 auto;
    text-align: left;
}

The text-align:center; just centres the content for older browsers and the text-align: left; makes sure that your text doesn't all centre as well. This isn't totally essentail but it's a good idea.

Pete.

Thanks pa007,

Which older browsers would you use that for, ie5x? or are you including ie6 in that. I'm always a bit confused as to what to test with. I have firefox and ie7 on my desktop and ie6 on my laptop. This means I pretty much ignore ie5x but I wouldn't think these days that would be too much of an issue. I know it's important to be as inclusive as possible when designing but you have to be practicle too.

Appreciate your help.

Paul R

If I remember rightly that is for ie6. ie7 is ok I think, though I wouldn't know as I always include the extra code. But it's still something worth bothering with, definitely.

Glad I could help.

Pete.

It's only necessary for IE6 if you trigger quirks mode.

Ah so that's why. I always did wonder. I basically just did it because when I made my first fixed width centred layout with css, I was told to. I won't anymore, thanks for the heads up.

Pete.

Don't forget that IE5 will need it.

IE6 rendering in quirks mode = IE5 rendering.

Well, I must admit IE 5 only gets a brief look as regards cross browser compatibility. Depends on the project but I never go too far out of my way to support IE 5, that said I've never had any major problems. I just wish they would ban IE 5, it would make life easier.

Pete.

Yep, much the same for me. I give it about 5 minutes, and only because conditional comments are clean It's just not worth much time given its tiny and diminishing market share.