Positioning elements at opposite sides of a div, both at the bottom

[Bert Coules]

Again, many thanks for all the help and advice so far; much appreciated, and my primary website now exists in a completely (or so I hope) mobile/tablet-friendly version.

 

I want to do the same to a second site. The basic construction is simple: one column made up of four divs:

 

header_box

top_box

text_box

footer_box

 

The top box holds an image at its left and a menu icon at its right:

 

 

The problem is that I want to eliminate the extra line-space below the image, and also to position the menu icon just above the bottom edge of the div.

 

This is the present coding:

#top_box {    width: auto;    height: auto;    border: 1px solid blue;  /* temp */} menu_icon {    float: right;    margin-right: 0.5em;} <div id="top_box">        <img src="images/blank_image.jpg">        <a href="index.php"><img class="menu_icon" src="images/menu_icon.png" alt="Menu          icon"></a><div/> <!-- top box -->      

I can get rid of the extra line-space by making the image "display: block" but that displaces the menu icon out of the div altogether:

 

 

I'd be grateful for any pointers to the right approach. Many thanks.

Edited December 15, 2014 by Bert Coules

[Ingolme]

You can set the image's vertical-align to "middle" to prevent the extra space from appearing below it.

 

If you want the icon to be at the bottom of the div then you will need to set that div's position to "relative" and use an absolute position on the icon. Give your <a> element a class or ID, for example id="icon"

#top_box { position: relative; }#icon {    position: absolute;    bottom: 5px;    right: 5px;}

[Bert Coules]

Ingolme, that worked beautifully. Many thanks for the speedy reply.