Quote-bubble float problems

**jhatter** · 12-04-2013, 12:48 PM

Hi,

I have inherited a pre-existing website from a client which I need to perform some updates to. I can't get my head around the problem on a customer quotes page.

Please can someone fix a problem with the Float issues on this page. Currently there are large gaps appearing instead of the 20px margin set for top & bottom

There are currently 2 div classes that control the float (or not as the case maybe)

Code:

.testimonial-wrapper-left {
	width:410px;
	padding:0px;
	margin-right:0px;
	float:left;
	}
	
.testimonial-wrapper-right {
	width:410px;
	padding:0px;
	margin-right:42px;
	float:left;
	}

The top one of these is not used in the page html but if I delete it from the style sheet the page layout is badly affected. Not sure why.

Code:

body {
	margin:0;
	padding:0;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	color: #666666;		
	background-color:#f3f6f5;
	}

#contentwrap {
	width:980px;
	margin:0 auto;
	background-image: url(images/wrap-bg.png);
	background-repeat: repeat-y;
	background-position: top;
	}

#content_box {
	width:910px;
	height:890px;
	margin:0 auto;
	padding-left: 25px;
	padding-right: 25px;
	background-color: #FFF;
	}	


<!-- TESTIMONIAL page starts -->

.testimonial-wrapper-left {
	width:410px;
	padding:0px;
	margin-right:0px;
	float:left;
	}
	
.testimonial-wrapper-right {
	width:410px;
	padding:0px;
	margin-right:42px;
	float:left;
	}

p {
	font-family:'Open Sans',sans-serif;
    font-weight:400;
    font-style:italic;
    font-size:15px;
	color:#1c4733;
	}
		
.bubblequote-wide-bttm {
	width:410px;
	margin:20px 0;
	}

.bubblequote-wide-bttm .qb-mid {
	background:#ebf0ed;
	padding:6px 20px;
	}

.bubblequote-wide-bttm .qb-top {
	height:8px;
	width:100%;
	font-size:1px;
	line-height:1px;
	overflow:hidden;
	background:url(images/quotebubble-410.gif) no-repeat left -19px;
	}

.bubblequote-wide-bttm .qb-bttm {
	height:30px;
	width:100%;
	font-size:1px;
	line-height:1px;
	overflow:hidden;
	background:url(images/quotebubble-410.gif) no-repeat left -35px;
	}

HTML Code:

<body>
<div id="contentwrap">

<div id="content_box">

<div class="testimonial-wrapper-right">
<div class="bubblequote-wide-bttm">
<div class="qb-top">&nbsp;</div>
<div class="qb-mid">
<p>Hi Derek,</p>
<p>We are more than satisfied with the service you and your team have provided so far. It has certainly made what could have been a very stressful couple of days, much easier on the whole family</p>
<p> Thanks again, James</p>
</div>
<div class="qb-bttm">&nbsp;</div>
</div>
</div>

<div class="testimonial-wrapper-right">
<div class="bubblequote-wide-bttm">
<div class="qb-top">&nbsp;</div>
<div class="qb-mid">
<p>Hi Damian,</p><p>We are more than satisfied with the service you have provided so far. It certainly made what could have been a very stressful day, much easier on the whole family</p>
<p> Thanks, Frank</p>
</div>
<div class="qb-bttm">&nbsp;</div>
</div>
</div>

<div class="testimonial-wrapper-right">
<div class="bubblequote-wide-bttm">
<div class="qb-top">&nbsp;</div>
<div class="qb-mid">
<p>Hi Derek,</p>
<p>We are more than satisfied with the service you and your team have provided so far. It has certainly made what could have been a very stressful couple of days, much easier on the whole family</p>
<p> Thanks again, James</p>
</div>
<div class="qb-bttm">&nbsp;</div>
</div>
</div>

<div class="testimonial-wrapper-right">
<div class="bubblequote-wide-bttm">
<div class="qb-top">&nbsp;</div>
<div class="qb-mid">
<p>Hi Damian,</p>
<p>We are more than satisfied with the service you have provided so far. It certainly made what could have been a very stressful day, much easier on the whole family</p>
<p> Thanks, Frank</p>
</div>
<div class="qb-bttm">&nbsp;</div>
</div>
</div>

</div>

</div>
</body>