Align Select box and images - html

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;
}
<div id="lang_social">
<div id="language">
<select>
<option value="swe">SWEDISH</option>
<option value="eng">ENGLISH</option>
</select>
</div>
<div id="twitter_conn">
<img src="http://www.placehold.it/32" onmouseover="this.src='http://www.placehold.it/32'" onmouseout="this.src='http://www.placehold.it/32'">
</div>
<div id="fb_conn">
<img src="http://www.placehold.it/32" onmouseover="this.src='http://www.placehold.it/32'" onmouseout="this.src='http://www.placehold.it/32'">
</div>
<div id="linked_conn">
<img src="http://www.placehold.it/32" onmouseover="this.src='http://www.placehold.it/32'" onmouseout="this.src='http://www.placehold.it/32'">
</div>
</div>

Answer 1

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:
<div id="lang_social">
<div id="language"><!-- Select goes here --></div>
<div id="social"><!-- Icons go here --></div>
</div>
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;
}
<div id="lang_social">
<div id="language">
<select>
<option value="swe">SWEDISH</option>
<option value="eng">ENGLISH</option>
</select>
</div><div id="social">
<img src="http://www.placehold.it/32/FF0000" />
<img src="http://www.placehold.it/32/FF9900" />
<img src="http://www.placehold.it/32/FF99CC" />
</div>
</div>
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:
<div id="language">
Contents
</div><div id="social">
Contents
</div>
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 <img>, we can use <a>, like so:
<div id="social">
<a class="icon facebook"></a>
<a class="icon twitter"></a>
<a class="icon linked"></a>
</div>
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(http://i.stack.imgur.com/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
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.
box-sizing: border-box incorporates padding and borders into the width and height.
* {
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;
}
#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;
}
.icon {
display: inline-block;
vertical-align: middle;
margin: 0 0 0 10px;
background: url(http://i.stack.imgur.com/1eIYU.png);
height: 32px;
width: 32px;
transition: background-position .3s
}
.facebook {
background-position: 0 0;
}
.twitter {
background-position: -32px 0;
}
.linked {
background-position: -64px 0;
}
.facebook:hover {
background-position: 0 -32px;
}
.twitter:hover {
background-position: -32px -32px;
}
.linked:hover {
background-position: -64px -32px;
}
<div id="lang_social">
<div id="language">
<select>
<option value="swe">SWEDISH</option>
<option value="eng">ENGLISH</option>
</select>
</div><div id="social">
<a class="icon facebook"></a><a class="icon twitter"></a><a class="icon linked"></a>
</div>
</div>

Answer 2

I couldn't see your icons so i have used my own. you can substitute. I made your ids into classes and gave the lang_social an overall attr of vertical-align:middle to affect everything. I also floated the language left. Here is a fiddle
#lang_social {
width: 100%;
height: 60px;
background-color: #3CC;
display: table;
vertical-align:middle;
}
.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;
float:left;
}
.twitter_conn {
display:inline-block;
margin-top: 10px;
margin-right: 20px;
width:30px;
float:right;
}
.fb_conn {
margin-top: 10px;
margin-right: 20px;
display:inline-block;
width:30px;
float:right;
}
.linkedin_conn {
width:30px;
float:right;
margin-top: 10px;
margin-right: 20px;
display:inline-block;
}
img {
width:32px;
height:32px;
padding:4px;
}
<div id="lang_social">
<div class="language">
<select>
<option value="swe">SWEDISH</option>
<option value="eng">ENGLISH</option>
</select>
</div>
<div class="linkedin_conn">
<img src="http://www.teratology.org/images/linkedin.png" onmouseover="this.src='http://www.teratology.org/images/linkedin.png'" onmouseout="this.src='http://www.teratology.org/images/linkedin.png">
</div>
<div class="fb_conn">
<img src="http://www.musicmatters.ie/images/fb3.png" onmouseover="this.src='http://www.musicmatters.ie/images/fb3.png'" onmouseout="this.src='http://www.musicmatters.ie/images/fb3.png'">
</div>
<div class="twitter_conn">
<img src="http://www.musicmatters.ie/images/twitter3.png" onmouseover="this.src='http://www.musicmatters.ie/images/twitter3.png" onmouseout="this.src='http://www.musicmatters.ie/images/twitter3.png'">
</div>
</div>