Webmaster Forum / HTML, CSS, Scripts / CSS / July 2008

In article
<bb833e31-20f8-4f0b-8a8b-9b8ecc854faf@34g2000hsf.googlegroups.com>,

You don't specify a doctype, so browsers are left to guess what you
intended and how to interpret the markup; also, can't put a <div>
inside a <span> (but you can nest a <div> inside another <div>)

I suggest you fix these errors before worrying anymore about the
actual layout.  See the output from:

<http://validator.w3.org/check?uri=http%3A%2F%2Fwww.altmarvel.net%2FLiam%
2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0>

If you need a two-column layout with a header, there are plenty of
examples around you can take a look at for inspiration!  Just
google for "two-column layout"...

Move the span containing the form so it's before all the other spans.
And change span to div-- I don't think you can put a form in a span like
that.

Firefox always puts floats on the next line (known bug).

As the other chap said, fix the validation errors.

Once you've done that, Firefox seems to be having a strange problem with
the width of a float containing a floated form. I don't know what's
causing that.

But anyway, just don't float the form. There's no need for it to be
floated.

And get rid of display: run-in. Just change it to display: inline or
leave it out (I think it was on a span anyway).

Sorry don't understand.

Don't understand either. The grey boxed cells are on the right as far as
I can see.

Validate it and then try to simplify it. If you say what general layout
you want someone may be able to provide a much simpler way to do it and
then all the problems will go away.

Well, the title of your post says it all, or at least a good portion.
You've got a bad case of DIV-itis, wherein you've overused DIVs and
SPANs instead of using appropriate markup like <p> for paragraphs and
<li> for list items.

Also, as others have noted, you can't put a div (block-level element)
inside a span or a p (ilnine-level elements).

Suggestion: Simplify, validate, repeat.

Take a look at my quick attempt at revising your page at
http://www.zugerfechtclub.ch/tests/Liam-OCOC.htm . (I'm having trouble
posting to my regular server, so here's the page on another site.)

I put your searchbox item first in the list rather than last (buggy and
unintuitive, but it seems to work, even though the markup is soiled a
bit by it).

I tossed out the 800px fixed width, and traded the .8em text size for a
size everybody can read (100%). The pixel-based sizes are mostly
percentages or ems in my sample.

I reworked the markup to be a bit more in line with the content. This
made it easier for me to throw out some of the divs and spans and extra
classes. Some of the classes I did keep are more or less renamed
versions of yours. Take a look at how much shorter my code is than
yours. Mine's not perfect by any means, but maybe you can get some ideas
from it. Notice also how it allows a bit of browser and text resizing.

The CSS validates, but the HTML doesn't (4 errors). You'd need to take a
look at the <form> element and fix what's wrong there.

HTH. GL.