thundercade64 Posted March 14, 2006 Share Posted March 14, 2006 I notice that most pages I see the content centered, leaving margins to the side (I'm assuming they do this incase someone is using 800x600 resolution). When I resize (making it narrower) the browser window on these pages, the margins disappear, and the main content stays centered until the margins are gone (e.g. www.gamespot.com, or www.gamefaqs.com).I'm sure this is simple, but i just can't get it. How do I get my main <div> element centered like this? I can get it about centered, but I can't think of a way to code the CSS/HTML to keep it centered and mimic what I described above.Any suggestions? Link to comment Share on other sites More sharing options...
Brendon Branigin Posted March 14, 2006 Share Posted March 14, 2006 dont take my word as definite as im new to css but i think i remember hearing that it was something to do with margin width set to auto. Link to comment Share on other sites More sharing options...
raimo Posted March 14, 2006 Share Posted March 14, 2006 [quote name='thundercade64' date='Mar 14 2006, 05:50 AM']Any suggestions?[/quote]1st of all, there is different kind of browsers, or three kind, in a fact. Two kind of MSIE and then all other browsers. :)I have no experience with Apple or Unix (linux) browsers, but with Windows browsers a very good result will come with:[b]CSS:[/b]#div1{margin: 0 auto;width: 500px;}[b]HTML:[/b]<div id="div1">Centered 500px wide div is here.</div>If You are using HTML 4.x Transitional dtd with MSIE 6.x You must set document type (before html -start tag) with URL-part of DTD to get centering happend.right DTD is:[b]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">[/b]if that URL-part (http://www.w3.org... etc.) is not in DTD, MSIE 6.x will not center div. For MSIE 5.x You need to set body text-align to center to get div centered.for MSIE 5.x (and all other browsers): [b]CSS:[/b]body{text-align: center;}#div1{margin: 0 auto;width: 500px;text-align: left; /* need to reset center inherited from body */}[b]HTML[/b]<div id="div1">Centered 500px wide div is here.</div>So You should think is MSIE 5.x allready old enough to forget or not?1. set right document type (DTD with URL)2. center div with CSS [b]margin: 0 auto;[/b]3. if MSIE 5.x is needed to get operate, center body with [b]text-align: center;[/b] Link to comment Share on other sites More sharing options...
thundercade64 Posted March 14, 2006 Author Share Posted March 14, 2006 thanks for that, that seemed to do the trick.The only question I have now is, when I use that code (the last code you put up, for FireFox) and put a border aroudn the <div>, then narrow the browser window, there is a tiny bit of space between the border and the left of the browser window that still doesn't go away when I narrow all the way down the <div>'s borders. Any thoughts? (I've tried a couple things, but cant seem to fix it) Link to comment Share on other sites More sharing options...
raimo Posted March 15, 2006 Share Posted March 15, 2006 thanks for that, that seemed to do the trick.The only question I have now is, when I use that code (the last code you put up, for FireFox) and put a border aroudn the <div>, then narrow the browser window, there is a tiny bit of space between the border and the left of the browser window that still doesn't go away when I narrow all the way down the <div>'s borders. Any thoughts? (I've tried a couple things, but cant seem to fix it)<{POST_SNAPBACK}> Set the body margin to 0px with Firefox (and all others too).Still Opera 8.x have some strange needs to get padding as 0px. Seems at this case will be fixed in Opera 9.This will center div and remove empty space around it with all browsers:body{margin: 0px;padding: 0px;text-align: center;}#div1{margin: 0 auto;width: 500px;text-align: left; /* need to reset center inherited from body */} Link to comment Share on other sites More sharing options...
thundercade64 Posted March 15, 2006 Author Share Posted March 15, 2006 Thanks for the help, that should do it! Link to comment Share on other sites More sharing options...
kurtsfar Posted March 16, 2006 Share Posted March 16, 2006 While you'r at it you might wanna try a less static width by only maxWidth instead of width. The result is a design that make your centered div's width to be 500px for clients that have a display that is bigger or equal to 500px. The only difference is that client's with smaller displays don't have to scroll horizontal. In other words there be a fixed upper limit, but no fixed lower limit. This kind of design is sometimes called elastic.If you don't understand, think of it this way:When setting the width property in CSS to 500px it is equal to setting both max-width and min-width to 500px. It is exact 500px.When using only the max-width property your width will still be max 500px, but it can also be less without a horizontal scrollbar appearing. This can be very usefulwhen you want to make a site more readable(not having too wide paragraphs), but still don't want clients to have to scroll horizontally.In the examples below I have used 500px, but you could of course change it to whatever width you prefer:/*This is how it is done in real browsers*/ div #yourwrapperdivID {max-width: 500px;} The most unreal browsers - Internet Explorer - doesn't understand the very useful max-width property, so you have to use either JavaScript or Expressions. Here is how you could make the max-width property work in IE by using expressions. /*Simulates max-width. If the window gets bigger than 500 the wrap is set to 500px*/div #yourwrapperdivID { width: expression(document.body.clientWidth > 500? "500px" : "auto"); height:1px;} You could put this directly in you main CSS file since only IE understand expressions. However, I would put it in a specific CSS file to make your main CSS file clean. This is a good way to link to a CSS file containing Conditional Comments: <head> <!--[if lt IE 7]> <link href="/resources/css/ieworkarounds.css" type=text/css rel=stylesheet /> <![endif]--></head> If you would like to read more about conditional comments, I wrote an article about what they are and some common usage:Browser Detection with Conditional CommentsNote: If users have active scripting(JavaScript, expressions, etc...) disallowed in their browser security settings, the expressions - or JavaScript for that matter - will not work and the div will fill out all the window, hence not be centered with your choosen width.Good Luck with your design Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now