XHTML block item inside and inline item

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Ok, I've been working on this site (www.glassrock.net/weblog) for a
little while now.  Everything works perfectly except one peice of code.
 I would like to have everything XHTML 1.0 Transitional however I have
an <h2> outside a <div>.  I have tried putting the <h2> inside the
<div> however the resulting formatting looks a bit funny.  This
particular peice of code is for a blank image with 4 links to the right
of it.

Here is the peice of code with some long urls removed so it is
<div id="right">
<div class="sidebar">

<h2 style="text-align: left;">
<div class="link-note">
<img src="about.jpg" alt="about.jpg" />
&nbsp;&nbsp;&nbsp;&nbsp;[<a href="about.html">&nbsp;About&nbsp;</a>]<br

href="contact.html">&nbsp;Contact&nbsp;</a>]<br />
&nbsp;&nbsp;&nbsp;&nbsp;[<a href="faq.html">&nbsp;FAQ&nbsp;</a>]<br
/><br />
href=""><strike>&nbsp;Pictures&nbsp;</strike></a>]<br /><br />
This works, but as you can see I have an <h2> ouside a <div> which is a

The relevant peices of CSS are as follows:
body {
    margin: 0px 0px 0px 0px;
    background: #6f0100
    background: url(http://www.glassrock.net/weblog/w_images/border.jpg)
        repeat-y center;
    width: 740px;
    padding: 0px;
#container {
    line-height: 140%;
    text-align: left;
    padding: 0px;
    width: 700px;
    background-color: #FFFFFF;
#right {
    float: left;
    width: 200px;
    background-color: #FFFFFF;
    overflow: hidden;
.sidebar {
    padding: 15px;
.sidebar h2 {
    color: #666666;
    font-family: Verdana, Arial, sans-serif;
    font-size: x-small;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
      letter-spacing: 3px;
.link-note {
    font-family: Verdana, Arial, sans-serif;
    font-size: x-small;
    line-height: 150%;
    text-align: left;
    padding: 2px;
    margin-bottom: 15px;
    margin-top: 0px;
    letter-spacing: 0px;
    vertical-align: middle;
You can see how I'd like it to look on the website,
www.glassrock.net/weblog.  It's the black image with text floating to
the right.  When I put the <h2> inside the <div> the links become
centered (in the space they have next to the picture) and the last link
ends up below the picture.  I've tried just about everything I can
think of and have nearly given up.  I nearly gave up when trying to
make it look the same in IE and Firefox, that took a while.  Any help
you can give me would be fabulous.

PS - I have the same error on the sidebar in the donate section but If
I can have some help fixing the first one I'm sure I can manage to fix
the second one on my own.


Re: XHTML block item inside and inline item

tj.tzavaras@gmail.com wrote:
Quoted text here. Click to load it
Quoted text here. Click to load it

Why do you want any of that to be an <h2>? As far as I can see, they're
  links, not headings. Why not just remove the <h2> tagging?

Also, why are you using &nbsp; all over your page to position things?
Thats' what CSS is for (margins and padding, etc.)

(Oh, one other thing. If you're going to make your page Transitional
rather than Strict, you have no excuse not to make it validate!)


Re: XHTML block item inside and inline item

Your criticism inspired me to change.  And change fixed my problem.

Site Timeline