Grow your CSS skills. Land your dream job.

Columns and negative margins

  • # June 10, 2009 at 8:02 pm

    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!

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    macmasters beach plumbing and bathroom renovations

    NSW Central Coast — Bathroom renovations and general plumbing and maintenance

    Phone: 0418 487 827

    MacMasters Beach Plumbing & Bathroom Renovations

    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 & 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 email us for an obligation free quote.


    # June 10, 2009 at 10:47 pm

    Firstly, you don’t need negative margins.
    Secondly, most of the problems are coming from your commenting. html comments should look like this:

    Code:

    And finally give #mainContent a width in px.

    # June 11, 2009 at 10:31 pm

    Thanks apostrophe. I guess the lesson is "keep it simple stupid."

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

You must be logged in to reply to this topic.

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