Help with centering...

[Anissa]

www.angelsmuseenterprises.com/testpage.html

www.angelsmuseenterprises.com/testpage.css

*sigh* I am fighting with the margins.

Why is it that I can get crap to line up when I use "px" but when I use percentages, it looks jacked-up in opera and chrome.

Should I just use all "px"?

Won't that effect how the browsers read the positioning?

(When I start bothering you, let me know.)

[Anissa]

#wrapper { width: 960px; margin: 0 auto; }
#header, #main, #footer, #main-nav {width: 960px; overflow: hidden;}
#main {padding: 30px;}
#section { width: 550px; foat: left;}
#aside { width: 250px; float:right;}
#header .site-title {width: 580px; float left;}
#header .figure {width:330px ; float:right; margin-right: 30px;}
#main-nav {clear:left;}

There may be some tweaking involved. But that should get you close.

I noticed when you use the margins, you don't use percentages, will this fix the problem I having in the previous response?

[ronniethedodger]

I always use pixels. You should not mix pixels and ems, and percentages are okay when within a container div that is holding two inner divs that you want to be placed side by side.

Example:

HTML:

<div class="container">
  <div class="left-panel">
      -- some content --
  </div>
  <div class="right-panel">
      -- some content --
  </div>
</div>


CSS:

.containter { width: 650px;}
.left-panel { width: 65%; float: left;}
.right-panel { width: 32%; float: right; }

The panels are floated left, floated right. I allowed a 3% difference ( 65% + 32 % = 97% of the total 650px) for separation. Never go the full 100%, come up short to 99% and you will be safe in all browsers. If you have borders, then you want to go down to 97% just to be safe.

While this will work perfectly, it is probably better to do the math and allow separation that is constant thru out your theme. I use a 960px grid system normally, and break the grid down into multiples of 30px chunks when laying out. It is simple, the spacing is uniform for margins, and it is easy to do the math.

[Anissa]

I always use pixels. You should not mix pixels and ems, and percentages are okay when within a container div that is holding two inner divs that you want to be placed side by side.

Example:

HTML:

<div class="container">
  <div class="left-panel">
      -- some content --
  </div>
  <div class="right-panel">
      -- some content --
  </div>
</div>


CSS:

.containter { width: 650px;}
.left-panel { width: 65%; float: left;}
.right-panel { width: 32%; float: right; }

The panels are floated left, floated right. I allowed a 3% difference ( 65% + 32 % = 97% of the total 650px) for separation. Never go the full 100%, come up short to 99% and you will be safe in all browsers. If you have borders, then you want to go down to 97% just to be safe.

While this will work perfectly, it is probably better to do the math and allow separation that is constant thru out your theme. I use a 960px grid system normally, and break the grid down into multiples of 30px chunks when laying out. It is simple, the spacing is uniform for margins, and it is easy to do the math.

Thanks again. I am in the process of redoing the code on the site. I will happily incorporate your help into it. I appreciate all your help.