(Urgent) DIVs in HTML: 4.01 Transitional?

[Bill Posters]

I'm trying to validate a page as HTML 4.01 transitional, but I'm having problems with some DIVs inside a nested table that I've used to align a single word to the right.


<table cellspacing="0" cellpadding="0" class="wide">
<tr>
<td valign="top" width="132"><img src="blah.gif" width="64" height="64" alt="&gt;&gt;"></td>
<td valign="top" width="11" class="vertical">&nbsp;</td>
<td valign="top" width="327">
<p><font class="headline">blah blah</font></p>
<p><font>blah blah</font>
<br>
<br>
<font>blah blah blah
<br>
<div class="right"><a href="http://www.blahblah.com/">More</a></div></font></p>
</td>
</tr>
</table>

The class 'right' is simply text-align: right;

The W3C validator is choking on the divs- giving me...

Error: element "DIV" not allowed here; possible cause is an inline element containing a block-level element

Spans validate ok, but lose the right alignment.

I need a way round this that still aligns the word More to the right.
I need to find it fast.

Big, huge, enormous thanks in advance

[creole]

Put the FONT tag inside the DIV tag. FONT is the inline element that the validator is referring to.

[creole]

Have you also tried using span instead of div?

<span align="right">
or
<span style="text-align;">

[Bill Posters]

spans don't work. It won't use the positioning attributes.

I created an extra closing </font> tag so that I could next the <font>...</font> tags within the <div>

Now the validator is questioning the closing </p> tga, saying...

Error: end tag for element "P" which is not open; try removing the end tag or check for improper nesting of elements

The new structure is which is giving me the <p> tag errors is...

<table cellspacing="0" cellpadding="0" class="wide">
<tr>
<td valign="top" width="132"><a href="..." class="mainnav"><img src="blah.gif" width="64" height="64" alt="&gt;&gt;"></a></td>
<td valign="top" width="11" class="vertical">&nbsp;</td>
<td valign="top" width="327">
<p><font class="headline">...</font></p>
<p><font>...</font>
<br>
<br>
<font>... <a href="..." class="headline">...</a> ...</font>
<div class="right"><font><a href="...">More</a></font></div></p>
</td>
</tr>
</table>

[creole]

Hmmmm...

Is the DIV being used once? If it is, then why not set the font style for the text inside the DIV in the DIV selector in your stylesheet? Then you won't have to use a FONT tag in that position.

You could try this:
<td valign="top" width="327">
<div>
<font class="headline">...</font>
<br><br>
<font>...</font>
<br><br>
<font>... <a href="..." class="headline">...</a> ...</font>
<div class="right"><a href="...">More</a></div>
</div>
</td>

[19nine78]

Error: end tag for element "P" which is not open; try removing the end tag or check for improper nesting of elements

You can't place a <div> inside a <p>.
the The w3c says so

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

Creole's suggestion is pretty much the same as I came up with.

cheers

alastair

[Bill Posters]

The final incarnation that went off yesterday was...

<table cellspacing="0" cellpadding="0" class="wide">
<tr>
<td valign="top" width="132"><a href="http://..." class="mainnav"><img src="blah.gif" width="64" height="64" alt="&gt;&gt;"></a></td>
<td valign="top" width="11" class="vertical">&nbsp;</td>
<td valign="top" width="327">
<p><font class="headline">...</font></p>
<p><font>...</font>
<br>
<br>
<font>... <a href="http://..." class="headline">...</a> ...</font>
<div class="right"><font><a href="http://...">More</a></font></div><br>
</td>
</tr>
</table>

I wasn't totally comfortable with this as it lacks a </p> tag, but still validates.

I could have also done this...
...
<font>... <a href="http://..." class="headline">...</a> ...</font></p>
<div class="right"><font><a href="http://...">More</a></font></div>
</td>
</tr>
</table>

...but I would have needed to place a <br> after the closing </div> to linebreak space beneath the word 'More'. ...
...
<font>... <a href="http://..." class="headline">...</a> ...</font></p>
<div class="right"><font><a href="http://...">More</a></font></div><br>
</td>
</tr>
</table>

Both ways validated ok, but the one with the trailing <br> seemed untidy to me, so I went with the first option (no closing </p> tag).

I'm still not happy, but it validated.

Perhaps I've just been playing with xhtml too much and expect everything to be closed

thx again for the help guys

[Hierophant]

You can't put DIV's inside a Paragraph tag... You would have to switch them around.

You could always make a paragraph class with no extra line return by using negative borders. But then you could use paragraphs within your DIV and get rid of most of the linebreaks (<BR>) and still get the same formatting...

If you want to move more into 4.01 strict and XHTML transitional you should change your font tags into spans though.

[creole]

Wayne...

You don't even need negative borders. Simply specifying

p.something {margin: 0px; }

will remove the extra line break on a p tag with a class of "something". The P will still incldue a line break equal to one <br> tag.

[Hierophant]

Okay that is an even better solution... Wasn't sure how the browsers handled the line feed and didn't test it. I did know you can overlap elements by using negative borders easily and it even works properly in Netscape 4.7 which doesn't always like absolute positioning.