Geek asks and answers

How to fix divs with overlapping centered, static divs on browser size?

I am trying to build a two-class layout with a sidebar that is always on the left side of the page, with the main content environment centered, and when the window is resized, the centered content will end up with nav, but never move further than where they touch (what's left: 150 pixels).

Can someone help me?

Here is the 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:

<!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 much appreciated!

+3
source share
2 answers

Do it:

<!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

#wrapper{
    margin-left: 150px;
}

, div div , div 150 , . div .

+1

, , #content: relative; : ; , , . , , .

, - .

+1

More articles:


All Articles