Absolute positioning. Need help displaying 3 images instead of 1

Question

    </div>

<div style="position:absolute;top:160px;left:535px;"><img src="splash.png"></div>
<div style="position:absolute;top:160px;left:535px;"><img src="splash2.png"></div>
<div style="position:absolute;top:160px;left:535px;"><img src="splash3.png"></div>
<!-- Press Logos -->
<div align="center">

how can i get all three splash images to display horizontally...

Answer 1

You could

• Give each div a different x position (the most straightforward way, really)

• Put them into a container of sufficient width and give the container position: absolute instead of the surrounding divs

Answer 2

Try changing your code to look like:

<div style="position:absolute;top:160px;left:535px;">
    <img src="splash.png"><img src="splash2.png"><img src="splash3.png">
</div>

Answer 3

By 'Display horizontally', do you mean they sit next to each other on one line? Images in markup will do this naturally unless there is not enough room, in which case they wrap to space below.

<div>
    <img src="splash.png" />
    <img src="splash2.png" />
    <img src="splash3.png" />
</div>

You can apply styling to the surrounding div to position the images centered, etc.

Additionally, your original markup example has some bad markup. Your image tags should be self-closing (I.e. ending in />, not >).

Answer 4

You can also use floats:

#header
{
     height: 100px; /*or something */
 }
#header img
{
      float: left;
      margin: 20px; /*change the margin(s) as you need */
}