I'm trying to get these icons to sit next to each other in the header with aligned in the middle (vertically), and kept on the right side of the page (maybe a float?) http://jsfiddle.net/qNWeV/1/Here is an image of what I'm trying to accomplish:
\[code\]<!-- HEADER --> <div class="header"> <img class="center-header" src="http://stackoverflow.com/questions/15606510/images/center_header.png" /> <!-- BUTTONS (header) --> <div class="header-buttons-right"> <!-- Notification Icon --> <div class="notify-div" class="right-margin"> <span id="notify-span"> 1 </span> </div> <div class="gear-settings"> <!-- Gear Settings --> </div> <div class="menu-button"> <!-- Menu Button --> </div> </div> </div>/* ******************* *//* TOP-NAV *//* ******************* */.header { background-color:rgb(243,243,243); width:100%; height:60px; border-color:rgb(243,243,243); border-width:2px; /* Firefox v1.0+ */ -moz-border-radius:0%; /* Safari v3.0+ and by Chrome v0.2+ */ -webkit-border-radius:0%/3%; /* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+ and by IE v9.0+ */ border-radius:0%/3%; border-style:solid;}.center-header { position: fixed; z-index: 1002; left: 50%; top: -45px; margin-left: -135px;}.header-buttons-right { float: right;}.notify-div { width: 24px; height: 24px; background: url('../images/notify-round.png') no-repeat center; text-align: center;} #notify-span { position: relative; top: 3px; font-family:"Futura LT Bold"; font-size:12px; font-weight:bold; line-height:117%; color:rgb(255,255,255); }.gear-settings { background: url('../images/gear-settings.png') no-repeat center; width: 24px; height: 24px; display: inline-block;}.menu-button { background: url('../images/menu.png') no-repeat center; width: 24px; height: 21px;}\[/code\]