CSS - How to position a fixed sidebar div relatively to a centered content div

Question

Basically, I have a fixed sidebar (with a fixed width) and a content div (with a max-width).

I want the content div to be centered, and the sidebar to be positionned to the left of this content div.

The problem is, on a small screen or when reducing the size of the window, the content div must shrink and not push the sidebar.

I tried a lot of solutions (floating blocks with fake margin blocks, display:inline-block and white-space: nowrap), without success.

Here's the actual page : http://daimao.info/logique-monde-esprit?testCSS=3 , which adapts great to the size of the screen but has all the content on the left of the window.

Here's a modified page : http://daimao.info/logique-monde-esprit?testCSS=1 , that shows what I try to do, but only display well on large resolutions.

Thanks for any help.

Answer 1

Here is an example of what I think you're after:

1. Code structure like this:

   <div class="container">
       <div class="sidebar">
           Sidebar content
       </div>
       <div class="content">
           Content
       </div>
   </div>
   

2. Create a fixed space for the sidebar by adding a fixed padding-left value to .container

3. Set the sidebar width to the same value, float it left, and give it a negative margin-left of the same value

The sidebar will remain the same size and continue to fill the padding-left of the container as the container resizes. The .content will fill the remaining space within .container, resizing as .container resizes.