Question

I have a web page with a fixed 200px column on one side (contains the menu). The right side is variable width. The right side will be populated using AJAX. For the default page (when no menu item has been selected) I’m trying to get the company logo centered horizontally in the page, not the div into which it is placed. None of the CSS I’ve tried so far works as expected, with the logo moving left or right of center as the browser window is resized horizontally. Fearing the loss of my remaining hair I’m looking for suggestions.

Additional info

The CSS for the two columns (from Dreamweaver) is

.sidebar1 {
float: left;
width: 200px;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 80%;
float: left;
}

The sidebar1 column contains the menu. The right (main) column is simply <div class="content"></div> and will receive the content from the server depending on what has been selected from the menu. This div is of course to the right of center relative to the page but I’d like to place the logo into the div but centered horizontally in the page.

Answer 1

If you need to have the logo inside the 80% content you could position it absolutely. This will allow the logo to be positioned by the body, instead of .content (since .content is position:static).

Try out this jsbin

.content .logo { position: absolute; left: 48%; top: 10px; }