CSS margin issue with floating dynamic elements withing a centered div

Question

I'm coding a Wordpress theme and I'm having an issue displaying 5 dynamic post thumbnails next to each other (left floated) with a 20px right margin within a centered div.

here's a link to a page: http://www.lesfourchettes.net/info (the issue occurs when you click on "Les Prèfs" in the top navigation: the top menu and the below content moves 10px to the left.)

Here's the issue:

• the site has a 960px width and is centered. (#wrapper)

• the 5 dynamically generated post thumbnails are 176px wide with a 20px right margin each. (#.prefs-thumbs)

• i choose these dimensions for the thumbnails thinking i would have 5 thumbnails and 4 margins between them which would add up to 960px.

• but the reality is that the last thumbnail of each row also has a 20px margin and therefore the whole thing adds up to 980px (20px wider than the site).

• the only solution i found for showing 5 thumbnails per row was assigning a 980px width to the thumbnail div (#prefs).

• however this seems to provoke an issue with the centering of the rest of the content which is no longer centered with the 960px site width but width the 980px thumbnail div.

• so whenever i click "lesprefs" to display the thumbnails (using a little jquery function), the whole content moves to 10px on the left.

The whole thing is a bit complicated to explain. But i feel like there is surely an easy CSS solution to my problem. Perhaps something to do with the overflow property, display property or someting like that... I'm just not good enough with CSS yet to identify the solution and my issue being so specific, I haven't found the answer on the web.

i feel like the problem lies within those lines of CSS:

#wrapper {
width: 960px;
height: auto;
margin: 0 auto 0 auto;
}

#prefs {
width: 980px;
height: 390px;
margin: 69px 0 0 0;
}

.prefs-thumbs {
position: relative;
float: left;
margin: 0 20px 20px 0;
}

Any help would be greatly appreciated. Cheers!

Answer 1

First thing to solve is the actual fitting of the elements in your block.

You need to remove the right-margin from the last element in each line..

So either set a class to the last item which overrides the margin with marign-right:0 or (for modern browsers) do it purely in CSS with

.prefs-thumbs:nth-child(5n+1){
    margin-right:0;
}

reference: http://www.w3.org/TR/selectors/#nth-child-pseudo

You also need to remove the border from the images as that gets added and instead of 176 pixels each of your images occupies 180 pixels (it has 2 pixel border around it)

So, correct your math first..

The issue with the moving of the content, is that the scroll bars appear once the content exceeds the page height (as expected). One solution is to keep the vertical scrollbar alwats visible, as @wsanville suggests in his answer.

Answer 2

I see the centered alignment shifting toward the left because of the vertical scroll that appear on the right side of the page.

Answer 3

You're noticing the 10px shift because the page height is increasing, and a horizontal scroll bar is being added by the browser.

My preferred solution to this problem is to always show the horizontal scroll bar, with the following CSS (works in all modern browsers):

html { overflow-y: scroll; }