Take the 2-minute tour ×

This is probably really simple but I am absolutely stumped. While the CSS for the sidebar (#primary) doesn't have a margin specified, a margin-right: 605px; is being applied somehow to the #primary div.

To fix the problem, I played with some relative positioning inside the containing div, but this is causing positioning discrepancies between Firefox and Chrome.

You can find the site in question at elsbethroseboutique.com. I know it's in bad shape, it's a work in progress :)

The solutions I'm looking for are either how to address the positioning differences between the two browsers; or ideally, how to remove that margin.


Screenshots:(red line added for reference)

http://elsbethroseboutique.com/images/chrome_elsb.jpg http://elsbethroseboutique.com/images/firefox_elsb.jpg

share|improve this question
I couldn't really see a difference between the browsers (FF & Chrome). Are you able to upload a screen grab to outline the exact problem? –  Dan Apr 5 '11 at 5:06
Yep, screenshots posted above. –  Analyticus Apr 5 '11 at 7:24
Geeze, I suppose it's not that simple! –  Analyticus Apr 6 '11 at 17:28
add comment

migrated from webmasters.stackexchange.com Apr 5 '11 at 3:09

This question came from our site for pro webmasters.

3 Answers

up vote 1 down vote accepted

This was a Chrome specific bug, where the developer tool told me there was a margin-right:605; when inspecting #primary. I think this was happening because there was no float property in place (although I can't understand why this was a problem if there were discrete values for height and width).

After floating #primary left, the problem appears to be solved and there is no longer a margin taking up the remaining space.

share|improve this answer
add comment

I don't see any discrepencies between Firefox and Chrome. Your code is quite the mess. What you need to do is identify the bloc of code you're having a problem with and post that. Even though I don't see the margin issue, often when I have a margin-right: problem that I can't find it turns out to be a margin-left: from another div. Hopefully that helps.

share|improve this answer
The #container element is a few pixels lower than the #primary element in chrome, but above the #primary in Firefox. If you use Chrome's inspect element (or firebug on Firefox), you can see there's a margin-right of 605 pixels being applied. This causes it to take up the entire width of the wrapper, and would force the container below it. The hack I used to fix it, was just to position it relative to the top of its containing div, but somehow this causes the discrepancy. –  Analyticus Apr 5 '11 at 6:32
add comment

Get Firebug and you can click on the element and see any styles applied to it.

share|improve this answer
I just realized: this is only showing up in Chrome dev tools, not firebug. Very, very strange. Must be a browser thing. –  Analyticus Apr 8 '11 at 18:17
add comment

Your Answer


