如何在浏览器调整大小时修复重叠居中的静态div？

Question

I am trying to build a two columned layout with a sidebar that always stays on the left side of the page with a main content area that is centered, and when the window is resized, the centered content will eventually bump up against the nav bar, but never move any further left than where it is when they touch (which would be left: 150px). 我正在尝试构建一个带有侧边栏的两个圆柱布局，侧边栏始终位于页面的左侧，主要内容区域居中，当窗口调整大小时，居中的内容最终会碰到导航栏，但是从不移动任何比它们触摸时更远的地方（剩下的就是：150px）。

Can someone help me out? 有人可以帮我吗？

Here is the CSS: 这是CSS：

@charset "UTF-8";
/* CSS Document */

body,td,th {
    font-size: 16px;
    font-family: Verdana, Geneva, sans-serif;
    color: #000;
}

body {
    background-color: #FFF;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 15px;
    margin-bottom: 0px;
}

#nav {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 150px;
    height: 10000px;
    background-color: #D61D21;
    text-align: right;
}

#nav a:link {
    color: #FFF;
    text-decoration: none;
}

#nav a:visited {
    color: #FFF;
    text-decoration: none;
}

#nav a:hover {
    color: #FFF;
    text-decoration: underline;
}

#main {
    width: 810px;
    height: 810px;
    margin: 0px auto;
}

and here is the html: 这是html：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div id="nav">
        <a href="index.php"><img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs"></a>
        <p><a href="portfolio.php">PORTFOLIO</a> &nbsp;</p>
        <p><a href="logos.php">LOGOS</a> &nbsp;</p>
        <p><a href="print.php">PRINT</a> &nbsp;</p>
        <p><a href="web.php">WEB DESIGN</a> &nbsp;</p>
        <p><a href="photography.php">PHOTOGRAPHY</a> &nbsp;</p>
        <p><a href="contact.php">CONTACT</a> &nbsp;</p>
    </div>

    <div id="main">
        ENTER CONTENT HERE
    </div>

</body>
</html>

Any help is greatly appreciated! 任何帮助是极大的赞赏！

Answer 1

A neat little trick I just learned is making your #content position: relative; 我刚刚学到的一个巧妙的小技巧是让你的#content位置：相对; and then make all child elements inside it position: absolute; 然后使其中的所有子元素位置：绝对; that way all child elements are absolute to your content area and the content will resize to any resolution. 这样，所有子元素都是您的内容区域的绝对元素，内容将调整为任何分辨率。 Saves me so loads of time and i can't believe how much time I used to waste laying dynamic sites out. 为我节省了大量的时间，我无法相信我曾浪费多少时间来浪费铺设动态网站。

Hope this does something for you. 希望这能为你做点什么。

Answer 2

Do this: 做这个：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="nav">
        <a href="index.php"><img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs"></a>
        <p><a href="portfolio.php">PORTFOLIO</a> &nbsp;</p>
        <p><a href="logos.php">LOGOS</a> &nbsp;</p>
        <p><a href="print.php">PRINT</a> &nbsp;</p>
        <p><a href="web.php">WEB DESIGN</a> &nbsp;</p>
        <p><a href="photography.php">PHOTOGRAPHY</a> &nbsp;</p>
        <p><a href="contact.php">CONTACT</a> &nbsp;</p>
    </div>

    <div id="wrapper">
        <div id="main">
            ENTER CONTENT HERE
        </div>
    </div>
</body>
</html>

CSS: CSS：

#wrapper{
    margin-left: 150px;
}

What you do is create a wrapper div around your main div and make that wrapper div have a left-margin of 150px so that it's side by side with the nav bar. 你要做的是在你的主div周围创建一个包装器div，并使该包装div具有150px的左边距，以便它与导航栏并排。 Now all your resizes inside the main div should be limited to within the wrapper. 现在主div中的所有调整大小都应限制在包装器内。

如何在浏览器调整大小时修复重叠居中的静态div？

问题描述

2 个解决方案

解决方案1
1 2012-04-11 22:44:01

解决方案2
1 已采纳 2012-04-11 23:07:12

如何在浏览器调整大小时修复重叠居中的静态div？

问题描述

2 个解决方案

解决方案1 1 2012-04-11 22:44:01

解决方案2 1 已采纳 2012-04-11 23:07:12

解决方案1
1 2012-04-11 22:44:01

解决方案2
1 已采纳 2012-04-11 23:07:12