4 replies [Last post]
Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 6 years 36 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

I suspect that a problem I'm having is pretty elementary ~ :oops: ~ but I also know we all start somewhere. I tried to sort it out from reading previous posts, but had no luck. So here I am.

I have a container (div id="globalcontent") which holds everything... header, sidebar, main content, and footer. All of this is supposed to be 740 px wide. I would like this entire 740px wide section to be centered. When I assign it a width, it automatically aligns to the left. When I remove the width, it centers but spreads out beyond my desired width.

http://www.digitalpawprint.com/test.html

html code:

<body id="pawprint">
<div id="globalcontent">
<div id="header">
<h1 id="headerimage">Digital Paw Print: graphics, web design, and web development</h1>
<ul id="menu"> <li id="homemenu"><a href="/" title="Main page">Home</a></li> <li id="servicesmenu"><a href="/services/" title="What we can do for you">Services</a></li> <li id="aboutmenu"><a href="/about/" title="Information about our company">About</a></li> <li id="portfoliomenu"><a href="/portfolio/" title="A showcase of our work">Portfolio</a></li>
	<li id="contactmenu"><a href="/contact/" title="How to reach us">Contact</a></li> <li id="vaultmenu"><a href="/vault/" title="View your current project">Vault</a></li> <li id="infomenu"><a href="/info/" title="Helpful articles">Info</a></li> <li id="linksmenu"><a href="/links/" title="Connect to related sites">Links</a></li></ul></div>
<div id="content">
<div id="sidebar"><p>La la sidebar content goes here</p></div>
<div id="info"><p>Blah blah blah. Here's where the main content goes. Blah blah.</p><p></p><p>Please don't think I'm actually using all of these hideous colours. They're just up right now to help me figure things out. The only colours will be the purples in the header and footer areas, with a black overall background, and white sections for text like this.</p><p>Dum de dum, doo de doo de dooooo... filling up space, yup yup.</p></div></div>
<div id="footer"><div id="footerimage"></div></div></div> </body>

CSS code:

body	
	{ text-align: center; margin: 0; padding: 0; border: 0; background-color: #000; height: 100%; color: #fff; font-family: "Gils Sans", arial, helvetica, sans-serif; }

div#globalcontent
	{ background-position: top center; position: relative; margin: 0; padding: 0; border: 0; height: 100%; width: 740px; background-color: #00cc33; }

div#header
	{ height: 187px; background-position: center; background-color: #000; }
	
div#content
	{ height: 100%; background-position: center; background-color: #990033; margin-left: 20%; }
	
div#sidebar
	{ position: absolute; top: 200px; left: 0; width: 20%; background: #66ccff }
	
div#footer
	{ height: 150px; background-position: center; background-color: #ffcc66; }
	
#headerimage
	{ height: 150px; text-indent: -9999px; background: url(./images/header.jpg) no-repeat; background-position: center; }
	
#info
	{ background-position: center; text-align: left; margin: 0; padding: 0; border: 0; background-color: #fff; color: #000; font-family: "Gils Sans", arial, helvetica, sans-serif; }
	
#footerimage
	{ height: 100px; background: url(./images/footer.jpg) no-repeat; background-position: center; }
	
/* Primary Navigation */
	
ul#menu 
	{ width: 567px; height: 70px; background: url(./images/menu.gif); margin: -55px 275px auto; padding: 0; position: relative; }

Looking at my page you'll see that I have a slew of other problems to tackle as well, but this one is the first and foremost that's annoying me. I'd appreciate whatever advice can be offered!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 1 day ago
Joined: 2004-06-30
Posts: 9679
Points: 815

[Solved] basic centering stuff

change margin: 0 to margin: 0 auto; in your div#globalcontent

Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 6 years 36 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

[Solved] basic centering stuff

That worked for Safari, Firefox, and Opera... but for some reason it didn't work in IE.

Any ideas?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

[Solved] basic centering stuff

It's your #menu you're going to have to rethink what your doing with the width and margin rules, IE handles overflow very differently to the proscribed method.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 6 years 36 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

[Solved] basic centering stuff

You're right Hugo ~ I removed the placement info on the #menu and it sorted out the centering problem in IE. That placement info wasn't working anyways... I'm going to have to tackle that separately.

Thank you ThePineappleHead and Hugo ~ I appreciate the help from you both in solving the centering issue!