dadamssg Posted January 27, 2009 Share Posted January 27, 2009 im just now diving into css and i want to create a div thats a fixed width and heighth and thats centered in the browser. how do i go about centering the div? i know i can center the whole <body> tag but that centers everything within the div as well. ive been playing around with it for a while but can't seem to get anywhere. i just want all the content of my page in this div. any help? Quote Link to comment Share on other sites More sharing options...
haku Posted January 27, 2009 Share Posted January 27, 2009 add: margin: 0 auto; to the div. Quote Link to comment Share on other sites More sharing options...
mpiekarski Posted January 29, 2009 Share Posted January 29, 2009 Hello, The last commenter is correct. However, some browsers may not show this properly unless you are specifying display:block;. So, as an example: <style type="text/css"> #object { height: 100px; width: 650px; display: block; margin: 0 auto 0 auto; /* To ensure that you have proper padding still */ padding: 2px 4px 2px 4px; /* Just for visibility */ background-color: black; color:white; border: red dashed 2px; } </style> <div id="object"> X X X X X X X </div> I put this up here. Let me know if you have any questions! Quote Link to comment Share on other sites More sharing options...
haku Posted January 29, 2009 Share Posted January 29, 2009 However, some browsers may not show this properly unless you are specifying display:block; What's that? Divs are block level elements on all browsers. Although I've been wrong before (even today) - which browser have you seen that doesn't render divs as block level elements? Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted January 29, 2009 Share Posted January 29, 2009 Yes, haku is correct. All div tags are displayed as block elements. Stating display: block; is redandancy. You must specify the width of a div to center it. A specified height is unnecessary (and actually discouraged). FilmGod Out Quote Link to comment Share on other sites More sharing options...
mpiekarski Posted January 29, 2009 Share Posted January 29, 2009 If I recall correctly, I was having issues getting cross-browsers with IE6 and 7 vs Firefox, safari, etc.. Most everything worked for firefox and safari but odd issues arose with iex. The issue was without saying to display:block, then the elements inside of the div became mis-aligned vs with it. I has just started to do this out of habit at this point. As far as the height and width, I specified them just as an example so the div didn't take up the whole page. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.