aligning right but not breaking the vertical align

Question

I'm still having a lot of trouble with this that it's even difficult to describe the problem now. The yellow text area should be right at the edge (righthand side edge) of the pink div and there should be 30px of margin in between this yellow area div and the other area on the left (contains the green and red areas).

The problem is fixed if I add 'float:right;' in 'home-featured-class-3', but this creates a new problem of shifting the yellow text area div to the top.

How can I make the yellow text div float right but also float vertically in the center? (without adjusting the height/width of anything)

HTML & CSS:

.home-featured-class-3{
 width: 630px;
 height:auto;
 margin:0 0 0 30px;
 display: inline-block;
    vertical-align: middle;
 background:#CF0;
}
.home-featured-class-4{
 width:298px;
 height:auto;
 margin:0 0px 0 0;
 border: 1px solid #211c20;
 display: inline-block;
    vertical-align: middle;
}
.home-featured-class-A{
 width:960px;
 height:auto;
 background:#C3C;
 vertical-align:middle;
}
.clear {
  clear: both;
}
h6{
 font-family:arial,verdana,helvetica,sans-serif;
 font-size:18px;
 color:#201c1f;
 text-decoration:none;
 text-transform:uppercase;
 font-weight:100;
 margin:0;
 padding:10px;
 background:#DB1D1D;
 text-align:center;
 border-top:1px solid #211c20;
}
h6 a:link{
 color:#201c1f;
 text-decoration:none;
}
h6 a:visited{
 color:#201c1f;
 text-decoration:none;
}
h6 a:hover{
 color:#201c1f;
 text-decoration:underline;
}

#home-featured-classes-wrap{
 width:auto;
 height:auto;
 margin: 30px 0 0 0;
}
.home-featured-class:hover .products {
    text-decoration: underline;
}
.home-featured-class-end{
 width:298px;
 height:auto;
 margin:0 0 0 0;
 border: 1px solid #211c20;
 float:left;
}
.home-featured-class-end:hover .products {
    text-decoration: underline;
}

<div id="home-featured-classes-wrap">

<div class="home-featured-class-A">
<div class="home-featured-class-4"><a href="products.html"><img name="RP-TEXT" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Color-Green.JPG" width="298" height="148" alt="RP-TEXT" style="background-color: #3366FF" /></a>
<h6 class="products"><a href="products.html" title="RP-TEXT">RP-TEXT</a></h6>

</div>

<div class="home-featured-class-3">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>

<div class="clear"></div>
</div>



</div>

Answer 1

This is your problem (described in CSS comments):

.home-featured-class-3{
    width: 630px;
    height:auto;
    margin:0 0 0 30px;      /* Here you set the margin to 30px on the left. */
    display: inline-block;
    vertical-align: middle;
    background:#CF0;
    margin: 0;              /* Here you set it back to 0 again. Simply remove this line. */
}

Also you’ll have to remove the newlines (or comment them out) above <div class="home-featured-class-3">. The HTML engine creates an additional whitespace character because of this newline leaving you only about 27px of space instead of 30px. You’ll have to remove these newlines in order to be able to set a distance of 30px.

This is what your HTML needs to be:

<div id="home-featured-classes-wrap">
  <div class="home-featured-class-A">
    <div class="home-featured-class-4">
      <a href="products.html"><img name="RP-TEXT" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Color-Green.JPG" width="298" height="148" alt="RP-TEXT" style="background-color: #3366FF" /></a>
      <h6 class="products"><a href="products.html" title="RP-TEXT">RP-TEXT</a></h6>
    </div><!--
    --><div class="home-featured-class-3">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
    <div class="clear"></div>
  </div>
</div>

JSFiddle.