Centered column plus a sidebar off to the right

I’m trying to do a 750px wide column in the center of the screen, with a 200px side bar off the right edge of that centered column.

I’m centering my 750px column using “margin: 0 auto;”

But, I can’t figure out how to get the sidebar out past the 750px box (to the right of it).

I don’t want a 950px centered box (main content 750px + sidebar 200px). I want main content centered and then 200px of sidebar off doing it’s own thing. :slight_smile:

Any thoughts?

I would suggest you float the sidebar, but you’d need a wrapper for that.

Instead, you could position the sidebar absolutely (in relation to the center column) but it will disappear off the page is the browser window is narrow … not a great scenario.

E.g.

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">
.content {width: 750px; margin: 0 auto; position:relative; height 600px; background: #f3f3f3}
.side {width: 200px; position:absolute; left: 770px; top: 0; height 300px; background: #f9f9f9}
</style>

</head>

<body>

<div class="content">
<p>main content main content main content main content main content main content main content main content main content main content main content main content main content main content </p>
	<div class="side">
	<p>sidebar</p>
	</div>

</div>

</body>

</html>

… not a great scenario.
There are a couple of other ways to do it but they are not much better because there is always an odd space when a scrollbar kicks in at narrow viewports.

You can use a negative margin on the floated column to pull it completely out of the parent. That does allow it to be scrollable but gives that unbalanced look when your scrolling.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
}
#wrap {
    width:750px;
    margin:0 auto;
    background:#CDF;
}
#wrap:after {
    clear:both;
    display:block;
    height:0;
    content:"";
}
#main {
    float:left;
    width:100%;
}
#column {
    float:right;
    width:200px;
    min-height:400px;
    margin-right:-200px;
    background:#CCC;
}
</style>

</head>
<body>

<div id="wrap">
    <div id="main">
        <p>Main Content Here</p>
        <p>Main Content Here</p>
        <p>Main Content Here</p>
        <p>Main Content Here</p>
        <p>Main Content Here</p>
    </div>
    <div id="column">
        <p>Right Col</p>
        <p>Right Col</p>
        <p>Right Col</p>
        <p>Right Col</p>
        <p>Right Col</p>
    </div>
</div>

</body>
</html>

Here’s one of Paul’s old demos.

http://www.pmob.co.uk/temp/center-offset3.htm

It uses min-width on the body as a means of getting the scrollbar balanced

Thank you both so much! Just a little too tired to figure all this out tonight. laughing