Menu block attached to the side of the center aligned content block - html

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.

Answer 2

I can't see your picture... but your description appears evident enough:
HTML
<div id="contentBlock">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
CSS
#contentBlock {
width: 500px;
display: block;
margin: 0 auto;
}
#contentBlock ul {
/* You really don't need anything in here because it should be left aligned in the first place */
}
If you want however for text and other elements inside your contentBlock to wrap-around the menu, then I'd suggest the following CSS remedy:
#contentBlock {
width: 500px;
display: block;
margin: 0 auto;
overflow: hidden; /* This is important, it clears a heights on the contentBlock and allows the creation of floated children to be taken out of the DOM */
}
#contentBlock ul {
float: left;
/* Again... the menu's text should by default be left-aligned here */
}

Answer 3

1 make your website center layout ...so that can view good on every resolution since your website is not looking like a vertical design.
for making the layout in the picture you need to do
1, html
<div id="header_wrapper">
<div id="header"></div>
</div>
<div id="wrapper">
<div id="menu"></div>
<div id="content">
</div>
</div>
<div id="footer"></div>
​
2, css for the header_wrapper
#header_wrapper{
width:100%; //so you can set the background to the header
}
3, css for the header
#header{
max-width:1200px;
min-width:1000px;
}
4, now make a wrapper which will have the menu and content
css for the content
#wrapper{
margin:0 auto; //make it on the center of the page
width:1000px;
display:block;
}
5 now add the menu and content in the wrapper
css for menu
#menu{
width:100px;
height:200px;
float:left;
}
6, and now for the content
#content{
width:300px; /*Define width*/
float:left;
}