Centering Divs (?!!?!?!?!?!) and Divs in Divs

[Zeradin]

I've been working with CSS for a while, but I never can understand centering divs and wrapping divs around divs. I always think I learn how and then I go to do another website and it doesn't work again.

:facewall: :facewall: :facewall:

I'm trying to make this site again: http://flux53.com

The code is terrible, so I'm trying to redo it here:

http://flux.thehyp.net

As you can see the divs aren't centering and the one around the images goes to the end of the container div. It looks like this:

<div id="container">
  <div id="header">
  
<div id="menu">
	<div class="menu-link"><a href="#">Home</a></div>
	<div class="menu-link"><a href="#">Events</a></div>
	<div class="menu-link"><a href="#">Gallery</a></div>
	<div class="menu-link"><a href="#">Photo</a></div>
	<div class="menu-link"><a href="#">Blog</a></div>
	<div class="menu-link"><a href="#">Us</a></div>
	<div class="menu-link"><a href="#">About</a></div>
</div>
<br style="clear:both" />

<hr />

<div id="title-div">
	<div id="left-header"><img src="images/title.png" /></div>
	<div id="right-header">Right Header</div>
</div>
<br style="clear:both" />

<div id="banner">
	<div class="banner-image"><img src="images/banner1.jpg" /></div>
	<div class="banner-image"><img src="images/banner2.jpg" /></div>
	<div class="banner-image"><img src="images/banner3.jpg" /></div>
	<div class="banner-image"><img src="images/banner4.jpg" /></div>
</div>
<br style="clear:both" />
  </div>
  <br style="clear:both" />

 

and the CSS

#container {
  margin: auto;
  width: 900px;
}

#header {
  margin: auto;
  width: 900px;
}

#menu {
font-family:Arial,sans-serif;
font-size:1em;
line-height:30px;
}

.menu-link {
float:left;
text-align:center;
width:100px;
}

.menu-link a {
color: #A1A1A1;
text-decoration:none;
}

.menu-link a:hover {
color:#D4D4D4;
}

#title-div {
width:900px;
margin:auto;
}

#right-header {
float: left;
}

#left-header {
float:left;
}

#banner{
border: 1px solid #D4D4D4;
overflow:hidden;
}

.banner-image{
border-right:1px solid #D4D4D4;
float:left;
}

 

please advice. i'm losing it.

[Zeradin]

bump?

[TheFilmGod]

Looks fine on FF 3.0 1440 resolution.

[Zeradin]

Looks fine on FF 3.0 1440 resolution.

 

I adjusted the margins to make it look right because I was showing it to them. The centering theory is wrong though and I'd love to learn how to do it. I feel like I could take a week long course on centering in CSS.