Question

I need the content block to be center-aligned, while the menu block has to be “attached” to the left side of content block. So the distance between these blocks should remain constant while risizing of the browser window. Could you tell me how to implement this, please? 🙂

Here some sample pictures of what I’d like to implement:
Browser window is maximized
Browser window was made small
Browser window was made smaller, and scrollbar appeared

Answer 1

Whoops I missed the “constant while risizing” bit, updated example to solve problem.

This what you’re looking for?

http://jsfiddle.net/r8YQc/1/

HTML:

<div id="header"></div>
<div id="content">
    <div id="menu"></div>
</div>
<div id="footer"></div>
​

CSS:

html,
body{
    margin:0;
    padding:0;
}

#header{
    margin:10px;
    background-color:orange;
    height:50px;
}

#content{
    position:relative; /*Create new offset context*/
    display:block;
    width:300px; /*Define width*/
    margin: 0 auto; /*center horizontally in available space*/
    height:400px;
    background-color:green;
}

#menu{
    background-color:lightgreen;
    position:absolute; /*Use left/right/top/bottom in relation to #content's offset context*/
    right:310px; /*move the right edge of the element 310px left*/
    width:100px;
    height:200px;
}

#footer{
    background-color: blue;
    margin: 10px;
    height: 50px;
}

P.S.

if you add a min-width of 540px (300px content width + 4 * 10px margins + 100px gutter on left and right for menu and empty space) to the body element, it won’t clip the layout when resized too small.