elements breaks xhtml alternative is span can't add padding or margin on it

Im writing something in xhtml and I want my description elements and header elements to be position along开发者_运维问答 to the left of my image I used div elements instead of span but that breaks the rules of xhtml so i tried the span elements instead also but i can't position them or add padding or margins to them what can i do. hee is what my code is. I want my description and header elements exaclty in the vertically in the middle 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>

breaks the xhtml rules what do I do

This way they are on the same line, horizontally (even thought you said vertically, but I think you mixed them up..since your current code would be displaying them vertically):

<div class="menu" style="width: 300px; height: 300px">
    <ul>
        <li class="menu-item">
            <a href="#">
                <img alt="There should be an alt text here" src="images/Icon.jpg" style="float: left; border: 1px solid #000000; width: 36px; height: 36px;" />
                <span style="float: left; display: block;" class="header">Electronics</span>
                <span style="float: left; display: block;" class="description">Computers & Office Supplies</span>
            </a>
        </li>
    </ul>
</div>

However, I cant really understand, why your xhtml is not validating correctly, with div's?! I think you meant, that your layout was breaking up.. because div = display: block;. To dumb it down, it means, that it will be full width..and doesn't really care about anyone else -- divs are selfish.

So in that case you need either to float it some way.. that makes it less selfish. Or make it display: inline-block;. However, inline-block is not very cross-browser.. so I recommend to use floating.

• http://www.w3schools.com/css/css_float.asp
• http://www.w3schools.com/cssref/pr_class_display.asp