css blueprint, create a div floating next to container div ? image attached

Question

Im trying to have a blueprint layout wich is 950px so I do something like the image below:

Like regular the 950px container ( right box ) is floating center page Now I'm in the need of having a #menu div floating left towards this 950px box, it should be positioned left to this #container 950px div and have a fixed width.

How can such a thing be accomplished? I tried already several css tricks to no avail, i know there is liquid layout but then the space between #menu and #container will become to big I want that space to be fixed like in below example say 20px the blueprint default.

anyone knows how to make this happen and have the divs stay on page even when screen resizes?

Answer 1

if i understood your question this will do what you want:

 body, html 
 {
    width: 100%;
 }

 <div style="margin: 0 auto; width: 1100px">
    <div style="width: 150px; float:left;">
       menu
    </div>
    <div style="width: 950px; float:left;">
       right part
    </div>
 </div>