Question

I want a basic full width layout with a 250px sidebar on the right. Here’s roughly what I want:

<-------Content-------><--250px sidebar-->
<---------------100% width--------------->

Is this possible without Javascript or tables?

Answer 1

Yes, of course:

see http://jsfiddle.net/whTwg/4/

HTML:

<div id="wrapper">
    <div id="sidebar-wrapper">
        <div id="sidebar">Sidebar</div>
    </div>
    <div id="main-wrapper">
        <div id="main">Main</div>
    </div>
</div>

CSS:

#wrapper{
    overflow:hidden;
}
#main-wrapper{
    overflow:hidden;
}
#sidebar-wrapper{
    float:right;
    width:250px;
    max-width:50%;/* You should set a max-width */
}
/*Here you can add borders, paddings and margins */
#main{
    background:#aaf;
    border:10px solid blue;
}
#sidebar{
    background:#faa;
    border:10px solid red;
}

Note: instead of #wrapper{overflow:hidden} (or something different than visible), you could add <div style="clear:both"></div> after main-wrapper.

Edit:

You are right, I forgot to add #main-wrapper{overflow:hidden;}. I have fixed the link and the code.