Floatless layout breaks in FF

HTML & CSS
1

Hi Guys,

I’ve been trying to implement a floatless from tjkdesign. com/articles/float-less_css_layouts. asp layout but it breaks in Firefox. The columns appear to have an equal width yet the content of the second column clears the content in the first one for some reason. You can see the page on web.me. com/jonasdeswaef/nitrogen/register.html (there’s a few spaces extra spaces in the links because I couldn’t post them otherwise :rolleyes:).

I’m probably overlooking some (stupid) detail but I’ve been looking at it for while now and can’t see where I went wrong.

I would really appreciate it if someone could point out my mistake.

2

Hi,

I dislike the way that whole page is wrapped in lists as it makes no semantic sense and is actually a nightmare to debug. Everything is just that much harder with all the multiple nestings and extra tags. I never subscribed to the belief that everything is a list and even if it was it is still hard to debug and makes for bloated code. (Maybe it’s just me so take no notice ;).

With that off my chest your problem can be solved like this :slight_smile:


#content {
    display:table-cell;
    background: aqua;
    width: 50%;
[B]    vertical-align:top;[/B]

}
#sidebar {
    display: table-cell;
    background: fuchsia;
    width: 50%;
   [B] vertical-align:top;[/B]
}
3

Thanks a million Paul, that fixed it!
I knew it had to be something simple.

P.S.
This is the first time I used list in my markup that way and only did so because it was done so in the article I was following. In hindsight I have to agree with your statement. I would be tempted to rewrite the whole thing if we didn’t plan on launching the site on friday. :slight_smile:

4

Removing the extra HTML parents (I didn’t look at the HTML) should take no time at all, and shouldn’t have to have you do anything else (unless you based your CSS cascade rules off of those parents :))