Although i am no stranger to CSS, i am very new to the complete seperation of content and presentation. Now that i am, completely, relying on CSS for presentaion i am running into some hurdles.

I am in a real bind and need to present this by this Thursday. Yikes. I still need to dress it up, artistically, but i am having an alignment problem with one of my divs. Everything displays properly in IE7 and FF. Safari and Opera seem to be adding 8px to the right of the div. You can see an example of it at mahaffey.hhvisualgroup.com. The area, in question, is the flash map with the bullets.

This is a basic 2 column fixed-width layout(this page does not need to scale). i have a header(#header), a left column(#subNav - floated left), a right column(#content - floated right), and a footer(#footer) which clears the floats - all wrapped in a div. Inside of "<div id="content">" i have another div called "flashMap" which holds the embedded flash file. The problem is either the #content or #flashMap or both. When #content is floated Safari and Opera add padding causing it to shift about 8px. When i use an absolute and relative position on these 2 rules, everything displays properly in all browsers. The downfall is that the wrapper and footer div no longer grows as the #content expands.

I can post any files or code needed, although all the html/css can be viewed in firefox. I am used to having to get IE7 to behave. I cannot figure out why this works fine in FF but not Safari or Opera. UG! please help!

i would be so grateful if anyone could help me out on this. It would really dig me out of a bind. I suppose i could use absolute and relative position for the demo. It just happens to be for a mac company. Figures.

thanks!

Put a width on #flashmap for one thing. When you float something, you MUST define a width. When you don't, you're tempting the browser demons to calculate - and you don't want them to do that.

thanks for the reply! yeah, i must have forgotten to add that back after some experimenting. I re-added the width, although it has no effect. Safari/Opera still seems to be adding extra padding on the right.

thanks again for the reply.

Hmm... ok.. why are you floating #flashmap ? #content is 523px wide, the map is 516px wide. Why not just put margin: 0 auto; on #flashmap so it centers it within #content ?

that is, precisely my delimma. I can't set the margins to auto because if #flashMap was centered in #content it would not line up to the nav bar. It needs to be positioned directly under the nav bar.

Since #content is 523px wide, when it floats right, the left side of #content is perfectly lined up with the nav bar. Hence the float: left; on #flashMap.

bummer.

thanks again!

Opera has VERY few bugs, and I"m not sure if any of these apply any more, but you can check them out:
http://www.positioniseverything.net/op-omnibus.html