0

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>

1 Answer 1

2

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.

2
  • I see - the margin:0 was one of the errors and ive removed it, but the problem is still here, and the text xxxxxxxxxxxx is just underneath - it should be vertically centered in the middle of the div and floating on the right. how can I do this? And where are the newlines above the div with home-featured-class-3 ? Jun 9, 2015 at 22:03
  • @user3760941 See updated question. Newlines generate a whitespace character which needs to be removed. Jun 9, 2015 at 22:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.