How to make floats extend the width?

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).

Answer 2

Your question is a little ambiguous; but i think the simplest solution is to wrap both the main content and the sidebar in a wrapper and give the wrapper a fixed width. Float the main content left and the sidebar right, and voila! Note that this will display the same on pretty much any screensize and wont' resize to fit, but CSS3 Media Queries are helpful for resizing issues.

Alternatively, you can just use percentages, which handles resizing windows just fine, but doesn't give you the fine control over the dimensions. To get the best of both worlds, you either need JavaScript or, as I pointed out above, media queries, so that you can dynamically resize/re-layout elements based on browser window size.

The other solution is to use tables, which are somewhat frowned upon for use in site layout.

Answer 3

If I'm understanding you correctly, this ought to do it:

CSS:

/* Pseudo CSS reset */
* { padding:0; margin:0; }

#containerOuter {
    position:absolute;
    width:100%;
    height:100%;
}
#containerInner {
    display:table;
    width:100%;
    height:100%;
}

#hiddenSidebar {
    display:table-cell;
    width:272px;
}

#contentOuter {
    display:table-cell;
    background-color:#999999;
    min-width:632px;
    height:100%;
}

#contentInner {
    margin-left:auto;
    margin-right:auto;
    background-color:#888888;
    width:632px;
    height:100%;
}

#sidebar {
    display:table-cell;
    width:272px;
    min-width:272px;
    background-color:#777777;
}

HTML:

<div id="containerOuter">
    <div id="containerInner">
        <div id="hiddenSidebar"></div>
        <div id="contentOuter">
            <div id="contentInner">Content</div>
        </div>
        <div id="sidebar">Right Sidebar</div>
    </div>
</div>