treehouse : what would you like to learn today?
Web Design Web Development iOS Development

sidebar not working

  • Hi,

    Everything looks fine with my sidebar in Dreamweaver, but when I preview in browser, everything turns into one column. The body content flushes left below the side bar text. Can anyone help? Thanks! Here is my code:

    <link href="site_CSS.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <h2>ASHLEY ROCHA</h2>
    <div id="sidebar">
    <p>INFO</p>
    <p>&nbsp;</p>
    <p>SAY HELLO</p>
    <p>&nbsp;</p>
    <p>WORK</p>
    <p>&nbsp;</p>
    <p>GREAT SITES</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    <div id="content">
    <p>This is where you read about me.</p>
    <p>Currently, I'm pursuing my master's degree in graphic design at the Academy of Art University, San Francisco. I also do freelance deisgn work so let me know if you have a project. Feel free to contact me if you have any questions about my work or you're interested in collaborating on a project. Don't hesitate to get in touch: ashleyrocha@gmail.com</p>
    </div>
    </body>
    </html>
  • 1. Remove all instances of "<p>&nbsp;</p>"

    2. Post the CSS code so we can help! :D
  • CSS CODE:
    @charset "UTF-8";
    /* CSS Document */

    body {
    font: small Verdana, sans-serif;
    color: #000000;
    padding: 30px;
    margin: 0;
    }
    p {
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 90%;
    line-height: 1.4em;
    }
    #sidebar {
    float: left;
    width 162px;
    margin-right: 30px;
    margin-bottom: 20px;
    padding-top: 0px;
    }
    #sidebar p{
    font-size: 50%
    line-height: 1.2em;
    color: #333333;
    }
    #content {
    margin-left: 100px;
    padding-left: 10px;
    border-left: 1px solid #222222;
    }

    SOURCE CODE:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>*// ASHLEY ROCHA \\*</title>
    <link href="site_CSS.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <h2>ASHLEY ROCHA</h2>
    <div id="sidebar">
    <p>INFO</p>
    <p>SAY HELLO</p>
    <p>WORK</p>
    <p>GREAT SITES</p>
    </div>
    <div id="content">
    <p>This is where you read about me.</p>
    <p>Currently, I'm pursuing my master's degree in graphic design at the Academy of Art University, San Francisco. I also do freelance deisgn work so let me know if you have a project. Feel free to contact me if you have any questions about my work or you're interested in collaborating on a project. Don't hesitate to get in touch: ashleyrocha@gmail.com</p>
    </div>
    </body>
  • Hmmmm... works perfectly fine for me?
  • Oh, I guess it just doesn't work in Safari. Firefox is fine. Is there a way for it to work in both? Thanks for the help!
  • haha works perfectly fine for me in Safari too!

    Make sure you're linking to the correct CSS file? That's the only thing I can think that's going wrong.