Frustrated with my own incompetence…

I’ve been rebuilding my site to use master pages (which is done and works great!) and along the way I decide to get rid of the tables used to create my top and side menu areas, moving instead to a CSS model…

No idea why, but I can’t get it to do what I want!! I’ve created a CSS based right off of a sample that is baked into Dreamweaver, and then tried to wrap the right styles around my content, but the main area of my page is appearing below the side menu, not floating alongside… bah. Anyway, I’ve put a test file up here and it is using this CSS file… so if anyone is a bit more of a CSS expert than me (and that wouldn’t be hard), I’d love some suggestions….

Author: Duncan Mackenzie

I'm the Developer Lead for the Channel 9 team, formerly worked on MSDN as a developer, content strategist and author.

7 thoughts on “Frustrated with my own incompetence…”

  1. You almost had it, but not quite đŸ™‚

    First, you don’t put the ‘float:left’ on #navbar. This confuses IE. Only have the have the ‘float:right’ on #content.

    Second, When exploiting ‘float:right’, IE renders things in a strange order, and the thing floating right must come first – so if you change your html to have you #content div just before your #navbar div, then it all works according to plan đŸ™‚

    Does this help?

  2. I was going to post to just get rid of the 79% in the margin but everyone beat me to it. Setting it to 0 makes it work as you were probably expecting in IE and Firefox.

    I would also suggest that you put a fixed width on the leftnav (as opposed to the percentage you have) if it’s just going to be displaying ads so it doesn’t change widths at different resolutions.

  3. Hi Duncan,

    CSS can be a real bugger. You can get away with making the following minor css changes to get it to work:

    1. remove “margin: 0 79% 0 0;” from the id navbar
    2. remove “display:inline;” from the id content.

    Note, you have really bashed that dreamweaver template way out of shape. The approach they use in the dw halo example is designed to give you one fixed pane and one scalable pane (which you aren’t doing). I strongly recommend to people playing with css for the first time to look at other peoples css but write their own by hand and keep it as simple as possible, it takes a little longer but it tends to “click” faster.


  4. You’re starting to sound like one of your (ex)co-workers. Must be the sleep deprivation.

    Two tools that may help with this, and future CSS headaches (courtesy of Lowell). Firefox and the Web Developer Extension. You can use it to highlight block-level items on a page, then view (and edit) the CSS, or click an area to see what CSS applies.

    Oh, and great samples of what you’re trying to do on

    TTFN – Kent

  5. Oh, and Pete was right.

    If you change navBar to:
    margin: 0 0 0 0;
    padding: 0px;

    It clears up the problem. I had a similar CSS overlap (box model issues) on my weblogs stylesheet.

    TTFN – Kent

  6. Looks like it is hard to get a 3-column layout working with only CSS, such that the columns don’t wrap when the browser is resized to be narrow?

Leave a Reply