Absolute positioning. Need help displaying 3 images instead of 1

    </div>

<div style="position:absolute;top:160px;left:535px;"><img src="splash.png"></div>
<div style="position:abso开发者_如何学Golute;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...

---

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 >).

---

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

---

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>

---

You can also use floats:

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