When working with xhtml, I encountered an issue where my description and header elements were not position correctly next to my image. I initially used div elements instead of span, which violated xhtml rules. Then I tried using span elements, but I was unable to position them or add padding and margins. Here is the code snippet I am dealing with: I need my description and header elements to be vertically centered beside the image, about 5 pixels from the left.
<div class="menu" style="width:300px; height:300px">
<ul>
<li class="menu-item">
<a href="#">
<img alt="" src="images/Icon.jpg" width="36" height="36" style="float:left; border:1px solid #000000" />
<div class="header">Electronics</div> // << span here doesn't work
<div class="description">Computers & Office Supplies</div> // << span here doesn't work
</a>
</li>
</ul>
</div>
This setup breaks xhtml rules. How can this be resolved?