Question

I have a minor issue here. I’d like to center the red div and have the two green divs float to the right. The two right divs appear to drop down?

http://jsbin.com/ewihuh/1/edit

HTML

<div class="headertop">
 <div class="centerblock">Centered</div>
 <div class="right1">right 1</div>
 <div class="right2">right 2</div> 
</div>

CSS

.headertop {
 width:100%;
 height:30px;
 background:black;
}

.centerblock {
 color:white;
 text-align:center;
 background:red;
 width: 200px;
 margin: 0px auto;
}

.right1, .right2 {
 color:white;
 float:right; 
 width:100px;
 background:green;
}

Answer 1

Live Demo

Hi now change to your html code and some change to css

Css

  .headertop {
    width:100%;
    background:black;
    text-align:center;
}
.centerblock {
    color:white;
    text-align:center;
    background:red;
    width: 200px;
    margin:0 auto;
}
.right1, .right2{
    color:white;
    float:right;
    width:100px;
    background:green;
}

HTML

<div class="headertop">
    <div class="right1">right 1</div>  
    <div class="right2">right 2</div>
    <div class="centerblock">Centered</div>
</div>