Align two images to bottom left & right corners of a <div>

Question

My page currently has something a bit like the following, in order to put two images on each side of my page header-bar.

    <div id="header" >
        <div style="float:left" >
            <img src="media/logo1.png"/>
        </div>
        <div style="float:right" >
            <img src="media/logo2.png"/>
        </div>
    </div>

While this works on the left-right alignment, I can't find a good tweak to get both images aligned to the bottom of the parent <div>. They seem to align to the top instead.

However I reckon this might be just the wrong approach to start with. Therefore all suggestions welcome on the best way to make it work - or better, how to arbitrarily force an image to a chosen corner of the parent <div>.

Answer 1

If your header has a fixed height, just use absolute positioning:

<div id="header" >
    <img id="logo1" src="media/logo1.png"/>
    <img id="logo2" src="media/logo2.png"/>
</div>

Then in your CSS:

#header     { position: relative; height: 200px}
#header img { position: absolute; bottom: 0; left: 0}
#logo2      { left: auto; right: 0}

Or, If your header is only as tall as logo1.png then use this CSS instead:

#header     { position: relative;}
#logo2      { position: absolute; bottom: 0; right: 0}

This will cause logo1 to set the height of header and logo2 will just sit at the bottom of header and on the right.

Answer 2

You can use margin-top property in the child divs:

<div id="header" >
        <div style="float:left; margin-top:20px" >
            <img src="media/logo1.png"/>
        </div>
        <div style="float:right; margin-top:20px" >
            <img src="media/logo2.png"/>
        </div>
    </div>

Answer 3

try this CSS

#header {width: 980px; position: relative; height: 300px;}
#header .left {position: absolute; bottom: 0; left: 0;}
#header .right {position: absolute; bottom: 0; right: 0;}

and code

<div id="header">
  <div class="left">
      <img src="img1.jpg"/>
  </div>
  <div class="right">
      <img src="img2.jpg"/>
  </div>
</div>