ここに示すようなページレイアウトがあります... http://jsfiddle.net/k55DE/
必要なのは、画面の幅に関係なく、2つのピンクの列の左端が常に整列することです。サイドバーコンテナの幅は常に300pxで、
助けてくれてありがとう
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<div id="toolbar">
<div id="nav">NAVIGATION</div>
<div id="search">SEARCH</div>
</div>
<div id="site">
<div id="content">CONTENT</div>
<div id="sidebar">SIDEBAR</div>
</div>
</body>
</html>
-
#toolbar {
margin-bottom:10px;
overflow:auto;
}
#toolbar #nav,
#toolbar #search {
float:left;
}
#toolbar #nav {
background-color:#ddffdd;
min-height:30px;
text-align:right;
width:66%;
}
#toolbar #search {
background-color:#ffdddd;
min-height:50px;
width:34%;
}
#site {
margin:0 auto;
overflow:auto;
width:800px;
}
#site #content,
#site #sidebar {
float:left;
min-height:300px;
}
#site #content {
background-color:#ddffdd;
text-align:right;
width:70%;
}
#site #sidebar {
background-color:#ffdddd;
width:30%;
}