Align Select box and images

Question

I have a div with a select box and 3 images.

I want to make this:

I have this:

So basically I am having trouble aligning the 3 images at the same height as the select box. I have tried several things and have no clue why it does not work.

Here is my HTML and CSS:

#lang_social {
  width: 100%;
  height: 60px;
  background-color: #3CC;
  display: table;
}
#language select {
  height: 40px;
  width: 200px;
  background-color: #3FF;
  border-color: #3FF;
  display: inline-block;
  vertical-align: middle;
  color: #FFF;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  font-size: 16px;
  margin-left: 10%;
  margin-top: 10px;
  ;
}
#twitter_conn img {
  float: right;
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  float: right;
}
#fb_conn {
  float: right;
  margin-top: 10px;
  margin-right: 20%;
  display: inline-block;
  vertical-align: middle;
}
#linkedin_conn {
  float: right;
  margin-top: 10px;
  margin-right: 10%;
  display: inline-block;
  vertical-align: middle;
}

misterManSam · Accepted Answer

The general layout

To simplify things, let's create two separate divs that are each given 50% width on one line.

They can be marked up like this:

and positioned like this, each child div is given 50% width and will line up next to the other:

#lang_social > div {
  display: inline-block;
  width: 50%;
}

We now have two divs on one line:

Right align the icons

We want the social icons to be aligned from the right, that's easy now:

#social {
  text-align: right;  
}

Apply the colours and we get the finished result:

If you want, we can end the answer here, have a snippet:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#lang_social {
  width: 100%;
  background-color: #3CC;
  line-height: 60px; 
  /*This Line height is the same as the height and will vertically center a single line*/
  min-width: 340px;
}
#lang_social > div {
  display: inline-block;
  width: 50%;
  padding: 0 10px;
}
img {
  vertical-align: middle;/*Important to align in the middle*/
}
#social {
  text-align: right;
}
#language select {
  height: 40px;
  width: 200px;
  background-color: #3FF;
  border-color: #3FF;
  color: #FFF;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  font-size: 16px;
}

or we can go a little further below.

Note:

Each inline elements closing tag has no whitespace between it and the next inline elements opening tag, this prevents the gaps between inline elements. Example:
```
    Contents

    Contents
```
box-sizing: border-box incorporates padding and borders into the width and height.

Hover states for the social icons using CSS Sprites

If you want to, we can create a simple image hover state for each social image without javascript.

Instead of using , we can use , like so:

This allows us to create the normal and hover state with a CSS sprite. We can apply the background to the icon class:

.icon {
  display: inline-block;
  vertical-align: middle;
  background: url(https://i.sstatic.net/1eIYU.png);
  height: 32px;
  width: 32px;
}

The background image looks like this:

Each coloured section should be changed with the social logo on a transparent background.

the top row of colours is used for the unhovered icon state. The bottom row is used for the hovered state.

Red = Facebook icon
Orange = Twitter icon
Pink = LinkedIn icon

Each icon section is 32px x 32px and each icon is positioned with background-position:

.facebook {
  background-position: 0 0; /*x-axis | y-axis*/
}
.twitter {
  background-position: -32px 0;
}
.linked {
  background-position: -64px 0;
}

On hover, the background-position is changed to show a hover state:

.facebook:hover {
 background-position: 0 -32px;
}
.twitter:hover {
 background-position: -32px -32px;
}
.linked:hover {
 background-position: -64px -32px;
}

Completed example