Question

I have two elements on a page. One being the main content container and the next one a sidebar. What I am trying to do is have it so that the sidebar is aligned to the far right ALL the time – meaning on the right of the screen no matter the screen resolution and the content container should be more or less in the middle of the page.

I have a main container that holds them both.

First thing that I tried was using absolute positioning on the sidebar but this didn’t work as when the resolution changed the sidebar would overlap the content.

For interests sake the content box is 632px & the sidebar is 272px.

So next thing I tried was floating each of these elements to the right & using a margin-left “percentage” of 10%. This obviously stopped the overlapping; however now when the resolution gets smaller to the point that it can’t contain the content element, the margin & the sidebar the content element now drops below the sidebar content.

So I was wondering if there was anyway that I could make it so the screen would get bigger and utilize horizontal scroll bars instead of making the content drop below the sidebar?

Answer 1

In order to implement my solution to your problem, you’re going to need to modify your HTML a little:

<div id="container">
    <div id="main">
    ...
    </div>
</div>
<div id="sidebar">
   ...
</div>

CSS:

* { margin: 0; padding: 0; } /* Or your favorite CSS reset to ensure that your body/html tag has no margin or padding */
#container { float: left; width: 100%; margin: 0 -272px 0 0; }
#main { float: right; width: 632px; }
#sidebar { float: right; width: 272px; }

I created a fiddle to show you what I’ve posted (Note that I modified the values so that it would fit in the tiny preview screen).