Grow your CSS skills. Land your dream job.

sidebar not working

  • # June 4, 2009 at 5:23 pm

    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>

    # June 4, 2009 at 5:45 pm

    1. Remove all instances of "<p>&nbsp;</p>"

    2. Post the CSS code so we can help! :D

    # June 4, 2009 at 5:49 pm

    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>

    # June 4, 2009 at 6:49 pm

    Hmmmm… works perfectly fine for me?

    # June 4, 2009 at 7:04 pm

    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!

    # June 4, 2009 at 9:16 pm

    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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".