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

Columns and negative margins

  • Hi there. I'm wondering if someone might be able to let me know what I'm doing wrong here? PLEASE!
    I've been teaching myself how to lay out web pages in CSS rather than tables (I'm a freshie!) and I've hit a snag. I'm trying to get my sidebar div to sit to the right of my mainContent div with the footer below. I've been using negative margins but it just isn't happening. I've uploaded this initial draft page http://www.macmastersplumbing.com.au (with inline CSS, dummy text and no linked pages). If someone could point out where I'm going wrong, I'd be stoked! It's been doing my head in. The content copy is running underneath (as in covered by) the sidebar in Safari and doesn't show up at all in Firefox. God knows what it's doing in IE. Thanks!
    <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
    <html xmlns=\"http://www.w3.org/1999/xhtml\">
    <head>
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
    <title>Central Coast Bathroom Renovations and Plumbing | MacMasters Beach Plumbing</title>

    <style type=\"text/css\">
    <!--
    body,td,th {
    font-family: \"Lucida Grande\", Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.2em;
    color: #666666;
    color: #333333;
    margin: 0;
    padding: 0;
    }
    body {
    margin-left: 0em;
    margin-top: 0em;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #EFEFEF;
    background-image: url(images/backgroundimg.jpg);
    background-repeat: repeat-x;
    }
    p {
    font-family: \"Lucida Grande\", Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: 1.5em;
    font-weight: normal;
    color: #333333;
    margin: 0em 0em 1em;
    }
    a {
    font-weight:bolder;
    color: #000000;
    }
    h1,h2,h3,h4,h5,h6 {
    font-family: Lucida Grande, Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    }
    h1 {
    font-size: 2em;
    color: #000000;
    }
    h2 {
    font-size: 1.4em;
    color: #000000;
    }
    h3 {
    font-size: 1em;
    color: #F26432;
    font-weight:bold;
    margin-bottom: 0.4em;
    }
    a:link {
    text-decoration: none;
    color: #242C30;
    }
    a:visited {
    text-decoration: none;
    color: #242C30;
    }
    a:hover {
    text-decoration: none;
    color: #F56624;
    }
    a:active {
    text-decoration: none;
    color: #666666;
    }
    #container {
    width: 780px;
    margin-right: auto;
    margin-left: auto;
    padding: 1.6em;
    background: #FFFFFF;
    }
    #masthead {
    background: #FFFFFF url(images/backgroundimghor.jpg) repeat-y right;
    margin-bottom: 1.75em;
    padding-top: 1px;
    display: block;
    }
    #navlinks {
    color: #FFFFFF;
    margin: 0px;
    padding: 0.5em 1em;
    background: #242C30;
    }
    #navlinks li {
    display: inline;
    border-right: 1px solid #FFFFFF;
    margin-right: 0.5em;
    padding-right: 0.75em;
    }
    #navlinks li.last {
    border-width: 0px;
    border-style: none;
    }
    #navlinks a {
    color: #FFFFFF;
    }
    #navlinks a:hover {
    color: #F56526;
    text-decoration: none;
    }
    #navlinks a:visited {
    color: #FFFFFF;
    }
    #mainContent {
    float: left;
    width: 100%;
    margin-right: -240px

    }
    #sidebar {
    float: right;
    width: 210px;
    background-color: #EFEFEF;
    padding: 1em;
    margin: 0 0 2em 0.1em;
    border: 1px solid #C6C6C6;
    }
    #sidebar img {
    margin-left: -0.4em;
    margin-top: -1em;
    border-width: 0px;
    }
    #sidebar h2 {
    font-size: 1em;
    line-height: 1.2em;
    padding: 0em;
    color: #139BE4;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 0.8em;
    margin-bottom: 0.4em;
    }
    #sidebar p {
    font-size: 0.9em;
    color: #333333;
    font-style: normal;
    }
    #footer {
    background: #C6C6C6;
    padding: 1em 1em .4em;
    clear: both;
    }
    #footer p {
    font-size: .9em;
    text-align: center;
    }
    #navlinks a {
    color: #FFFFFF;
    }
    #phone {
    color: #000000;
    text-align: right;
    padding-right: 2em;
    font-weight: bold;
    margin-top: -1.8em;
    font-size: 1.1em;
    padding-top: 0px;
    }
    .tagline {
    color: #EF672B;
    background: #FFF;
    margin: 0.2em 0px 0px;
    font-family: \"Lucida Grande\", Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
    padding: 0.5em 0em 0.5em 1em;
    border-bottom: 1px solid #666;
    }
    #footer h5 {
    font-family: \"Lucida Grande\", Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.7em;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-align: left;
    line-height: 1.2em;
    }
    -->
    </style>
    </head>

    <body>


    <div id=\"container\">


    <!--/*---------------------------------------------MASTHEAD*/-->


    <div id=\"masthead\">
    <p><a href=\"index.html\"><img src=\"images/logo.jpg\" alt=\"macmasters beach plumbing and bathroom renovations\" width=\"155\" height=\"100\" border=\"0\" /></a><br />
    </p>
    <h2 class=\"tagline\">NSW Central Coast — Bathroom renovations and general plumbing and maintenance</h2>
    <p id=\"phone\">Phone: 0418 487 827</p>


    <!-- /*---------------------------------------------NAVLINKS*/-->


    <ol id=\"navlinks\">
    <li class=\"first\"><a href=\"#\">Bathroom renovations</a></li>
    <li><a href=\"#\">Plumbing</a></li>
    <li><a href=\"#\">Metal roofing</a></li>
    <li><a href=\"#\">Gallery</a></li>
    <li><a href=\"#\">Testimonials</a></li>
    <li><a href=\"#\">Links</a></li>
    <li><a href=\"#\">Contact</a></li>
    <li class=\"last\"><a href=\"index.html\">Home</a></li>
    </ol>
    </div>


    <!-- /*----------------------------------------------CONTENT*/-->


    <div id=\"mainContent\">
    <p><img src=\"images/towelhead.jpg\" width=\"520\" height=\"245\" /></p>
    <h2>MacMasters Beach Plumbing &amp; Bathroom Renovations</h2>
    <p>Are you looking for a plumber you can trust to do the job right, the first time and that won't cost a fortune? Whether it's a quality bathroom renovation or simply clearing a blocked drain, MacMasters Beach Plumbing &amp; Bathroom Renovations are here to help. We are highly experienced tradespeople who take pride in our work and deliver only the best quality jobs time and again. With over 15 years of experience, we know which products work and last. We can advise you with the design of your bathroom renovation project to help you make the right decisions and create a bathroom you're delighted with. Call or <a href=\"mailto:info@macmastersplumbing.com.au\">email us</a> for an obligation free quote. </p>
    </div>

    <!-- /*-----------------------------------------------SIDEBAR*/-->


    <div id=\"sidebar\">
    <h2>10 tips for great bathroom renovation RESULTS</h2>
    <p>Are you looking for a plumber you can trust to do the job right, the first time and that won't cost a fortune? Whether it's a quality bathroom renovation or simply clearing a blocked drain.</p>
    <h2>BATHROOM TRENDS</h2>
    <p>Are you looking for a plumber you can trust to do the job right, the first time and that won't cost a fortune? Whether it's a quality ba</p>
    <h2>Testimonials</h2>
    <p>Are you looking for a plumber you can trust to do the job right, the first time and that won't cost a fortune? Whether it's a quality ba</p>
    <h2>Resources</h2>
    <p>Are you looking for a plumber you can trust to do the job right, the first time and that won't cost a fortune? Whether it's a quality b</p>
    <p><a href=\"mailto:info@macmastersplumbing.com.au\"><img src=\"images/calculator.jpg\" alt=\"contact us\" width=\"220\" height=\"104\" /></a></p>
    </div>

    <!-- /*---------------------------------------------FOOTER*/-->


    <div id=\"footer\">
    <p><a href=\"#\">BATHROOM RENOVATIONS</a> | <a href=\"#\">PLUMBING</a> | <a href=\"#\">METAL ROOFING</a> | <a href=\"#\">GALLERY</a> | <a href=\"#\">TESTIMONIALS</a> | <a href=\"#\">LINKS</a> | <a href=\"#\">CONTACT</a> | <a href=\"#\">HOME</a></p>
    <p>Call Geoff on 0418 487 827 or email us at <a href=\"mailto:info@macmastersplumbing.com.au\">info@macmastersplumbing.com.au<br />
    </a>563 The Scenic Rd, MacMasters Beach NSW 2251 | Licence #56267c</p>
    <hr />
    <br />
    <p>SERVICING ALL AREAS OF THE CENTRAL COAST INCLUDING: </p>
    <h5>Alison, Avoca Beach, Bar Point, Bateau Bay, Bensville, Berkeley Vale, Blackwall, Blue Bay, Blue Haven, Booker Bay, Budgewoi, Buff Point, Calga, Canton Beach, Chain Valley Bay, Charmhaven, Chittaway Bay, Chittaway Point, Copacabana, Daleys Point, Davistown, Dooralong, East Gosford, Empire Bay, Erina, Erina Heights, Ettalong, Ettalong Beach, Forresters Beach, Fountaindale, Glenning Valley, Gorokan, Gosford, Green Point, Gunderman, Gwandalan, Hamlyn Terrace, Holgate, Jilliby, Kanwal, Kariong, Killarney Vale, Killcare, Kincumber, Kincumber South, Koolewong, Kulnura, Lake Haven, Lake Munmorah, Lisarow, Long Jetty, Macmasters Beach, Mangrove Mountain, Mannering Park, Mardi, Matcham, Narara, Niagara Park, Norah Head, Noraville, North Avoca, North Gosford, Ourimbah, Patonga, Pearl Beach, Picketts Valley, Point Clare, Point Frederick, San Remo, Saratoga, Shelly Beach, Somersby, Spencer, Springfield, St Huberts Island, Summerland Point, Tacoma, Tascott, Terrigal, The Entrance, The Entrance North, Toowoon Bay, Toukley, Tuggerah, Tumbi Umbi, Umina, Umina Beach, Wadalba, Wamberal, Warnervale, Watanobbi, West Gosford, Woongarrah, Woy Woy, Wyoming, Wyong, Wyongah and Yarramalong.</h5>
    <h5>Site by <a href=\"http://www.chorusdesign.com\">Chorus Design</a></h5>
    </div>



    </div>
    </body>
    </html>
  • Firstly, you don't need negative margins.
    Secondly, most of the problems are coming from your commenting. html comments should look like this:
    <!--MASTHEAD-->

    And finally give #mainContent a width in px.
  • Thanks apostrophe. I guess the lesson is "keep it simple stupid."