Floating another div next to a main centered div

Question

Ok so I have a website and the entire thing is wrapped in a container. This container is centered with margin:auto. I would like to float a piece of content to the right of this centered container and have it sort of stick to the side of it no matter if the user resizes the browser window, etc. I'm wondering if there's a real simple way to do this rather than adding another huge div, giving it width and floating the centered portion to the left and the piece of content to the right. Thanks!

Answer 1

Floating is the way to go for this. They will always stick together, unless the container is smaller than the sum of their widths.

Tip: make sure your container is wide enough to hold both inner divs; if not, and the user has a narrower window, they will show one below the other.

Answer 2

Give the container div the property position: relative; place your floating div as the first child of the container div and give it

#floatingDiv
{
    position: absolute;
    top: 0;
    right: -{widthOfFloatedDiv};
}

I think that will work, but untested

Okay so tested it and it works

<div style="position: relative; width: 980px; margin: 0 auto; border: 1px solid #000; height: 400px;">
    <div style="position: absolute; top: 0; right: -200px; width: 200px;">
        <p>Floated DIV</p>
    </div>
    <p>container div</p>
</div>

Answer 3

Piggybacking on @NickAllen, you want to use absolute positioning so that the width of the sidebar isn't included in the centering on the primary container.

<style type="text/css">
    #container {
     position: relative;
     width: 500px;
     border: 1px solid #f00;
     margin: 0px auto;
    }
    #sidebar {
     position: absolute;
     width: 200px;
     right: -200px;
     border: 1px solid #0f0;
    }

</style>

<div id="container">
    <div id="sidebar">
     [ sidebar content ]<br>
     [ sidebar content ]<br>
    </div>
    [content]<br>
    [content]<br>
    [content]<br>
</div>

Answer 4

Maybe I'm misunderstanding your question, but isn't this what you want:

<div id="container">
    <div id="sidebar">
    some content
    </div>
</div>

#container {
    width: 960px;
    margin: 0px auto;
}

#sidebar {
    float: right;
}