HTML/CSS Align (inline, horizontally) & Keep Right

ebandgaet

New Member
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:
h0mMe.png
\[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\]
 
Back
Top