HTML5 Horizontal Image Placement

I am fairly new to HTML5 so this will maybe seem like a simple question although I haven't found an information about this online. It appears as though most cases where people want to do this they use a table (but I understand that is not a good idea anymore)

In my header area I need to place several images side by side. They should be justified so there is space between the images and each image is in the right place. I have an appropriately sized header block in place but for the life of me can't figure out how to arrange the images inside it correctly.

The images should be layed out like this: (http://imageshack.us/photo/my-images/339/tmpyg.jpg/)

开发者_开发知识库

layout

I have tried this:

<header>
<img src="ICUWB.jpg" alt="ICUWB" height="100" width="250"/>
<img src="Logo.jpg" alt="ICUWB" height="250" width="250"/>     
</header>

But I am not sure what needs to go in the css region i guess

header {
    background: #3d3837;
    margin: 0 auto;
}

Thanks for the help.

---

I understand that what you want to achieve its something like this "snapshot" (color borders on the images are only to see the "pieces" easier), the header is in light grey.

http://imageshack.us/photo/my-images/200/unled1ik.jpg/

There are several ways to do this, first one:
(I added and ID to the header (optional)).

<header id="arriba">
    <img src="1.jpg" alt="1" />
    <img src="2.jpg" alt="2" />
    <img src="3.jpg" alt="3" />
</header>

The CSS:

header#arriba {
    width:960px;
    height:350px;
    clear:both;
    margin:auto;
    text-align:center;
    background-color:#ccc;
}

header#arriba img {
    vertical-align:middle;
    margin:0 2px 0 2px; /* YOU CAN ADJUST IMAGES SPACE WITH THIS MARGINS */
}

Hope it's what you need.
Regards.
P:.

---

With your current markup, add this CSS:

header img{
  float:left;
  margin-right:5px;
}

Btw, you may end up wanting to give a class to those images and target them with the class at a later time.