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

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; }