CODEWITHSUNDEEP
javascriptcss
Leo Jiang
Leo Jiang

Reputation: 26075

How do I achieve this layout without using Javascript?

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?

Upvotes: 1

Views: 65

Answers (2)

Oriol
Oriol

Reputation: 288020

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.

Upvotes: 1

Anton Belev
Anton Belev

Reputation: 13523

<div style="float: left">
  ..... content ......
<div>
<div style="float: right; width: 250px;">
 ..... sidebar .....
</div>
<div class="clear"></div>
... other content

This is the CSS for the class="clear":

div.clear {
    clear:both;
}

You can set the first div width when you see how much space you have.

Is this helpful?

Upvotes: 1

Related Questions