Question

So basically I have 3 inline-block divs that are stacked horizontally as such:

div1 — div2 — div3

div1 and div3 are skyscraper ads, and div2 is my main content wrapper. The problem I had initially was that whenever I resized my window to make its width smaller than the divs’ widths combined, div2 and div3 would wrap to the next line underneath div1, because they did not fit on the same line (same problem when viewing website from smartphone or tablet because they have small width), and div1 (an ad) would sit there awkwardly centered on the main page. I fixed that by adding white-space: nowrap to the body tag to prevent the divs from wrapping, and adding white-space: normal the content-wrapper div to prevent it inheriting from the body element so that the content text can wrap normally. This fixed the problem and now when I visit the website, the three divs are always on the same line regardless of the browser width, and there’s a horizontal scrollbar if needed.

However, the scrollbar always starts at the left side and so my content-wrapper (div2) which is my main content that should be centered is not. Instead div1 (ad) shows up first on the left side followed by the content-wrapper. How can I correct this situation? I know the divs will be centered just the way I want them if I were to get rid of the word-wrap on the body, but that would bring back the initial problem of the divs wrapping when they shouldn’t. Is there anyway I can fix both problems using CSS?

Answer 1

I’ve done something similar once where I needed a column to be offset to the right of the main content area. It was easy enough to position the column off to the right, but the real trick was preventing it from affecting the overflow/scroll of the page.

The solution was to add the following two properties to a container that wrapped my main content and column:

#wrap { 
    min-width: 960px; 
    overflow-x: hidden; 
}

I’ve adapted this to show how it can be used in a 3-column layout with two skyscrapers on either side: DEMO