Question

https://gist.github.com/2354116

If you view the above page in Chrome/Firefox then everything seems to be fine. The divs at the bottom (the two headings and the social icons) are wrapped in a container div and center without issue.

If it’s viewed in Safari though then these three divs are not centered at all :/

I’m not sure why this is…. can anyone help?

Answer 1

Note: had to assume a lot with your design so modify anything that does not fit your original design.

First off, you are not properly containing your page elements (content, carousel, footer), you currently have multiple width containers trying to reside side-by-side and that is breaking your design in multiple places.

Your content container is width:940px, your .wrapper div is width:750px, your .paramWrapper div is width:870px, your .carousel div is width:735px. You have to pick one width and stick to it and just use margin to push content accordingly across your page. I used 860px, which is the width of the span11 class.

Next, you’re modifying the bootstrap.css stylesheet directly, that means that whenever the bootstrap gets updated all of your changes will be lost if you overwrite the bootstrap stylesheet, so create a another stylesheet and put all of your custom styles there and just load it “after” the bootstrap stylesheet in your header.

Now onto your original issue, the bottom .paraWrapper div is not properly stacking because you have a width of 870px set in your container and the elements within do not add up to that width:

span3 + span3 + span2 + margin = 640px

So it was not an issue or a bug, its just your layout.

Here is a fixed version that i very quickly put up so you’re going to have to modify the elements to fit your design once again: http://jsfiddle.net/rzSFa/3/, here is a demo of what it looks like.

By the way, you’re using the responsive bootstrap stylesheet for naught, it is currently not doing much in your case so why even use it? You can easily modify a few media queries to support my fixed version though, but yours will not work at all because you’re declaring all of your own classes with custom widths so there is no point in including it.