CODEWITHSUNDEEP
css
Leahcim
Leahcim

Reputation: 41929

I can't get these to float properly with CSS

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;
}

Upvotes: 0

Views: 53

Answers (3)

cwhelms
cwhelms

Reputation: 1771

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;
}

Upvotes: 1

philipp
philipp

Reputation: 16515

you have to choose either position relative, or float. Floats initialize an other box context than positions. Also you have to float the image containers inside your header div and this header div ( the container one ) needs to have a specified width.

Upvotes: 1

DA.
DA.

Reputation: 40671

Each header is 400px wide + 20px padding + 15px margin + 2px border = 437px. So if your container is set to 800px in width, that's the issue...you don't have enough room.

Upvotes: 2

Related Questions