CSS Fluid content with fixed sidebar (sidebar needs fixed height)

I've searched alot of pages on google but I just can't seem to find a good example of a page that has fluid content (width 100%) and has a sidebar on the right with a fixed width and a fluid height (100% of needed space of sidebar).

Is this even possible in CSS?

Vis开发者_开发技巧ually the page would look like this.

C= content S= sidebar

cccccccccccccc ssssssss

cccccccccccccc ssssssss

cccccccccccccc ssssssss

ccccccccccccccccccccccc

ccccccccccccccccccccccc

ccccccccccccccccccccccc

The above example is similar to the alignment of an image in text.

Thanks in advance!

Link to original Fiddle code: jsfiddle.net/uYTht/2

Link to solved Fiddle code (altered by George): jsfiddle.net/uYTht/18

---

UPDATE

Based on your comment, it appears that the content will also be wrapped in a "post" div, of which there will be multiple. This changes things slightly - it requires an understanding of the difference between block elements and inline element. Essentially, you need your "post" div's to have inline formatting - this will allow each line to be broken into individual elements that can have different width's (e.g. a short-width when next to the sidebar, a longer width when below the sidebar.

In your jsfiddle link, you tried to float the post's to the left, which forces the element to display:block; thus the entire element is wrapped in one box (instead of line-by-line 'boxes') which can only have on width. If that width is too wide, it won't have room to sit next to the sidebar and will be positioned below it.

You'll also need a clearfix property to make sure your container expands properly. When I checked last, the box was collapsing.

Your stylesheet includes:

....
#content {display:block; width:100%;}
#sidebar {float:right;width:200px;}

.post {display:inline;}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
   visibility: hidden;}
....

The sidebar width can be set to whatever you like.

Then your html sections include:

...
<div id="content" class="clearfix">
    <div id="sidebar">
        All Sidebar content here
    </div>
    <div class="post">
        Content content content...
    </div>
    <div class="post">
        Content content content...
    </div>


</div>
...

W3schools has a succint explanation of floats.

---

Here is a working example for you:

Your HTML:

<div id="content"> 
<p>This design uses a defined body height of 100% which allows setting the contained left and 
right divs at 100% height.</p> 
</div> 

<div id="sidebar"> 
<p>This design uses a defined body height which of 100% allows setting the contained left and 
right divs at 100% height.</p> 
</div> 

Your CSS:

body { 
margin:0; 
padding:0; 
height:100%; /* this is the key! */ 
} 

#sidebar { 
position:absolute; 
right:0; 
top:0; 
padding:0; 
width:200px; 
height:100%; /* works only if parent container is assigned a height value */ 
color:#333; 
background:#eaeaea; 
border:1px solid #333; 
} 

#content { margin-right: 200px; }