Question

I’m trying to float two images in a header side by side but can’t get it to work. Importantly, one is a bit taller than the other, but I don’t think that should be an issue

In my failed attempt ( I can’t even get them to float at all), I set it up like this… The total header area is 850 px, so I split it in half for each image

<div class="header a"><a href="http://example.com/">
<img src="http://example.com/pic.jpg" width="400" height="50" padding-left="10px"  alt="dodobird" />
</a></div>

<div class="header b">
<a href="http://example.com/">
<img src="http://example.com/2.jpg" width="400" height="70" padding-left="10px"  alt="dodobird" />
</a></div>

My failed CSS was like this. Can you tell me what I’m doing wrong?

.header {
    position: relative;   
    float: left;

    width: 400px;
    border: 1px solid #fff;
    margin: 0 15px 15px 0;
    padding: 5px 10px 10px 10px;

}

.header div {
    width: 400px;

    position: absolute;
    top: 0;
    left: 0;

}

 .a div {
    height: 50px;   
}

 .b div {
    height: 70px;
}

Answer 1

you have padding on header, which is on both divs.

the .header div is pointless, because there is no div inside the .header(.header is the div in this case).

All you really need for this is:

.header {  
    float: left;
    width: 400px;
}

 .a {
    height: 50px;   
}

 .b  {
    height: 70px;
}