Problems with CSS Fixed Width

This entry will probably be of no interest to most of the people who still read this blog, but for my own personal reasons I need to document my progress in resolving this issue - if only because every time I run into a problem coding a website, I remember that I had the same, or a similar problem last time I was coding a website. When I can't remember how I resolved certain problems, it kind of makes me want to put my face through things. More so when I figure it out again. So much for learning the hard way.

I'm doing the xhtml/css for a friend's website. He's a graphic designer, himself, so the design he proposed is clean, simple, and pretty streamlined. Simple enough. Or so I thought.

The most current problem I resolved was that my navbar was bullying my main window, taking up the remainder of the container instead of being the fixed width that it had been assigned, which pushed the main window down below the navbar.


You can see the problem above. This was all very confusing and it started happening when I brought iframes into the equation, although iframes had nothing to do with it (multitasking...sometimes it's not your friend). I knew that the css had to be buggy, but I couldn't figure out how. I did the basic scan of open brackets, missing semi-colons...all of it checked out:

#navbar {
position: relative;
display: inline;
margin: 0;
padding: 0;
width: 90px;
height: auto;
background: #ffffff;
}

After an hour of using firebug, gnashing my teeth, and not seeing anything helpful, I added this, practically on a whim:

#navbar {
float: left;
position: relative;
display: inline;
margin: 0;
padding: 0;
width: 90px;
height: auto;
background: #ffffff;
}

It worked! I remember facing this problem with the index page of my own website, and as you can imagine, it's really frustrating to have spent an hour banging my head against the wall before that simple no-brainer solution finally started to come into focus. Especially on a project with a fixed budget.

Now. Onto iframes.

(design by tim gentle)