Home/ Questions/Q 867043
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T09:54:37+00:00

In order to follow correct web standards, I’ve tried to layout image and div

  • 0

In order to follow correct web standards, I’ve tried to layout image and div inline. In orde to achieve that – I’ve used display:inline property.
But then I experienced the following issue: image renders from the center line, and div doesn’t respect height parameter set to it. I’ve tried using line-height parameter, but that didn’t give any useful results.
I’ve also tried various combinations with setting margin/padding to some values or to auto, or replacing div with span, or wrapping img and div with additional divs.
I’ve managed to achieve desired result by using position:absolute, but that doesn’t help in cases where I want to use centered/relative positioning of the whole component…

Any clues or ideas or troubleshooting hints?

Please find the html example below:

<html>
<head>
    <title>Test Page</title>
</head>
<body>      
    <div style="border: solid 2px green; height:40px;width: 600px;">
        <span style="border:solid 2px green; position: absolute; height:50px; width: 50px;">
            <i m g 
          style="display:inline; margin: 3px; padding:0px; border: solid 2px lightblue;"
            height="38px"
            width="38px" 
            src="someimage . JPG"
        />
        </span>
        <span style="position:absolute; left: 100px; width:400px; height:60px; margin:3px; border: solid 2px red;">
            Some text that should be displayed in the center/middle of the div
        </span>
    </div>
    <br />
    <br />
    <br />
    <br />
    <div style="border: solid 2px green; height:80px;width: 600px;">
        <span style="border:solid 2px green; position: absolute; height:50px; width: 50px; vertical-align:bottom;">
            123
        </span>
        &nbsp;
        <span style="position:absolute; left: 100px; width:400px; height:60px; margin:3px; border: solid 2px red;">
            Some text that should be displayed in the center/middle of the div
        </span>
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Thanks for trying to help out.

    First – the solution:
    I’ve added few attributes to image tag and that helped a lot:
    hspace=”0″ vspace=”0″ align=”top” border=”0″

    Second: explanation:
    Since I wanted to do “inline” (or “inline-block”) thing, I had to figure out how inline/inline-block elements are laid-out by browsers. If you read CSS2 layout spec, you will soon find out that there is an issue with image and divs. Problem is with vertical-align – where image is aligned/rendered comparing to baseline, while divs go for bottom-line (or vice versa). That caused my example not be aligned.
    Setting above mentioned params for the image tag helped.

    Remarks:
    Due to the complex history of IE5,6,7, Firefox, Gecko, WebKit, Chrome, CSS2 and BoxModel, there are some shortcomings to Layout model. Original problem comes from IE5 and 6 handling BoxModel in different way from CSS standard. That’s maybe the main reason for having quirks mode and DTD standards.
    However, this is a broad topic, if you want to find out more, I recoomend readin CSS2 spec and recommendation.
    If you want to discuss it more – feel free to contact me via PM

    Thanks again to all for helping and good luck with your Layouts

    Kind regards
    MP

    • 0