Forum Moderators: not2easy
<html>
<head>
<style type="text/css">
#wrap {
margin:0px;
width:100%;
text-align:center;
}
#content_event {
margin:0px;
margin-top:10px;
min-height:300px;
width:800px;
text-align:center;
}
#content_event p {
margin:10px;
width:800;
text-align:left;
text-indent:20px;
}
#content_event a {
margin:0px;
color:blue;
font-size:14pt;
text-decoration:none;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content_event">
<h1>Parties eh?</h1>
<p><specifics removed></p>
<p>All events and information regarding events will be posted here.</p>
<a href="event_pool.html">Spring Fling</a><br />
<a href="event_other.html">Other Event</a>
</div>
</div>
</body>
</html>
When this displays the "content_event" will be on the left side of the screen. What is my problem?
[edited by: Baxter30 at 3:57 pm (utc) on Mar. 18, 2009]
[edited by: swa66 at 4:27 pm (utc) on Mar. 18, 2009]
[edit reason] removed specifics [/edit]
2. When in doubt, put borders on offending elements to see what's going on.
3. You'll see in IE, it centers properly because it's accepting "text-align:center" from wrap, which is really incorrect because the div is not text. As mentioned, applying auto to the left and right of content_event fixes it in both.
4. For an HTML doctype, <br/> is invalid code; see Why most of us should not use XHTML [webmasterworld.com] and Choosing the best doctype for your site [webmasterworld.com].
#wrap {
margin:0px;
width:100%;
text-align:center;
border: 1px solid #ff0000; /* remove after debugging */
}
#content_event {
margin:0px;
margin:10px auto 0 auto;
min-height:300px;
width:800px;
text-align:center;
border: 1px solid #00ff00; /* remove after debugging */
}
"margin: 0 auto" gives a block element margins on the left and right that center it in the available space. (IE6 gets this wrong when in quirks mode)
I've never seen Firefox miss the ball on this. The fact that IE gets it wrong and Firefox gets it right whenever they disagree is quite common. It's one of the reasons I never use IE during the design. I'll fix IE trouble after it's done for the compliant browsers using a conditional comment.
Absolutely positioned elements can be centered as well [google.com]
