Question

I asked this question the other day and wasn’t able to get the solution i needed…

I would like to align the search box and social media icons on either side of the logo area to the bottom of the header (the grey section). This is so when the user/client of the site wants to swap the logo for their own, no matter the height of it, the search box and social media areas will push themselves to meet the bottom of the header.

Here is a quick example of what I’m trying to get at:
http://jsfiddle.net/AeRc8/

If someone could please help by illustrating how this is done within a jsfiddle, that would be greatly appreciated.

Answer 1

Here’s an edited version of your jsfiddle example:

http://jsfiddle.net/Shedal/AeRc8/1/

I applied position: relative to the <header> element and position: absolute to the #search and #social elements, with positioning rules corresponding to left-bottom and right-bottom corners.

And of course, removed float: left and float: right, since this effect is now achieved with absolute positioning.