Home/ Questions/Q 83245
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T21:44:36+00:00

I have the following div layout: Everything is fine when I put normal txt

  • 0

I have the following div layout:

Everything is fine when I put normal txt elements in both the blue and the orange div. However, when I place an image in the orange div (which is 31px), the elements in the blue div get pushed down by about half the height of the blue div.

(additional info, when hovering over the html for the orange div in firebug, it seems like only half of the image is contained within it, even though to the naked eye it appears fine).

Would appreciate any help, I’m still a bit rusty on the box model. Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. You might want to try floating the image to the left of the text. This way the text will sit next to the image without the need for positioning. For example: 

    <style> div { position: absolute; border: 1px solid blue; } div img { height: 31px; width: 50px; float: left; } </style>  <div>     <img src='myImage.gif'>     <p>Lorem ipsum dolor sit amet...</p> </div>

    Adjust the layout by giving your container div some padding and/or the image a margin and you should be able to get exactly the look you’re after. Good luck!

    • 0