Home/ Questions/Q 6573611
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T15:09:20+00:00

Im writing something in xhtml and I want my description elements and header elements

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0