CODEWITHSUNDEEP
csshtmlcentering
John Gardeniers
John Gardeniers

Reputation: 390

Center content in middle of page when inside a div over to one side

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.

Upvotes: 0

Views: 926

Answers (1)

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

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

Upvotes: 2

Related Questions