Just cant get text to sit where i want :-(

Hello from Wakefiled UK centre of misery and moaning :frowning:

Heres todays problem…

http://www.pauserefreshment.co.uk/google_ad_draft.html
On the above linkk is a page where Ive got at text align prob. Specifically speaking where it says - “When it costs 20p per cup and you sell for £2 per cup its easy to see why selling coffee remains one of the most lucrative business …” I need this to float to the right of the business man pic.

The problem at the mo is that it sits below the image. How can I get it to sit to the right of the image in the same way “sell coffee make money sits”.

Any insights welcome:

@charset "utf-8";
/* CSS Document */

*{margin:0;padding:0;}

body {
background-color:#D68126;
}

#container
{
width: 96%;
max-width: 1200px; 
min-width: 550px;
background-color: #fff;
color: #333;
border: 1px solid #702453;
line-height: 130%;
margin:2% auto;
}

#top
{
padding: .5em;
background-color: #FFFFFF;
border-bottom: 0px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}

#top img {
margin: 0px;
padding: 0px;
}

#leftnav
{
float: left;
width: 50%; 
margin: 0;
}

#content
{
margin-left: 50%;
border-left: 3px solid #622449;
}

#footer
{
clear: both;
margin: 0;
padding-bottom: 5px;
color: #333;
background-color: #FFFFFF;
border-top: 3px #702453;
color:#622449;
font-weight:bold;
}

#footer .points
{
float: left; 
position: relative;
margin-bottom:0px;
padding:0;
}

#footer .utube2
{
float: right; 
position: relative;
margin-bottom:0px;
padding: 0;
}


#content h1 { 
margin: 0 0 0 5px; 
padding-bottom: 3px;
color:#622449;
}

#leftnav h1 { 
margin: 0 0 0 5px; 
padding: 3px;
color:#622449;
}

#leftnav h3 { 
margin: 0 0 0 5px; 
padding: 3px;
color:#B5B43E;
font-size:30px;
font-family:Arial, Helvetica, sans-serif;
line-height: 1.5em;
}

#leftnav h4 {
padding: 3px;
margin: 0 0 0 5px;
color:#B5B43E;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
}

#content h2 { 
padding: 0;
margin: 0 0 0 5px; 
color:#B5B43E;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
line-height: 1.5em;
}

#content h5 {
padding-top:5px;
margin: 0 0 0 5px; 
color:#B5B43E;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
}

#leftnav h2 {
padding: 0;
margin: 0 0 0 5px;
color:#B5B43E;
}



#content p {
padding: 0;
margin: 0 0 0 15px; 
color:#B5B43E;
}

#leftnav p { 
margin: 0 0 0 15px;
padding-top: 3px;
padding-left: 2px;
color:#622449;
font-weight:bold;
padding-bottom:20px;
}

#content p { 
margin: 0 0 0 15px;
padding-top: 3px;
padding-left: 2px;
color:#622449;
font-weight:bold;
padding-bottom:20px;
}

a:link {color: #622449; text-decoration: none}
a:visited {color: #622449; text-decoration: none}
a:hover {color: #D68126; text-decoration: underline; font-size: 100% }

#header {
	height:125px;
	width:100%;	
	background-color:#702453;		
}

#header p {
float:left;
width:222px;/*need these two*/
/*left:-2px;Won't work without a positioin*/
margin:0;
/*position:absolute;
top:5px;Using floats instead so..*/
}


#header p a {
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	width:207px;
	height:103px;
	margin-top:15px;
	margin-left:15px;
	background:url(../images/logo8.gif);	
}

#header ul {
/*left:244px; no need*/
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:0;/*update tihs to 0 to compensate for browser differences*/
padding:0;
position:relative;
float:left;/*add this*/
top:12px;
}

#header ul li {
	float:left;
}
#header ul li a {
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	height:109px;
	background-image:url(../images/text-topnav9.jpg);
	background-repeat:no-repeat;
}
#header ul li a.who {
	width:91px;
	background-position:0 0;
	margin:0px 10px 0 0;
}
#header ul li a.our {
	width:93px;
	background-position:-91px 0;
	margin:0 10px 0 0;
}
#header ul li a.happy {
	width:105px;
	background-position:-184px 0;
	margin:0 10px 0 0;
}
#header ul li a.come {
	width:103px;
	background-position:-289px 0;
	margin:0 10px 0 0;
}
#header ul li a.useful {
	width:93px;
	margin:0 10px 0 0;
	background-position:-392px 0;
}
#header ul li a.on-line {
	width:94px;
	margin:0 10px 0 0;
	background-position:-485px 0;
}
#header ul li a.show {
	width:95px;
	background-position:-579px 0;
}
/* footer2 start */
 	.nav {
    margin:auto;
    border:1px;
    width:100%;
    height:60px;
    background:#A6AE1F;
    font:bold 88%/1.1 verdana;
	clear:both;
	overflow:hidden;
	}

 	.nav li {
    float:left;
    list-style:none;
	margin:5px;
	
		}
	
	.nav li a img {	
	margin:0 -5px;
	border:1px inset #66f;
	color:#ffffff
	background:;
		}

    .nav li a {
    float:left;
    padding:0 5px; 
    height:50px;
	line-height:50px;
    color:#ddd;
    text-decoration:none;
    text-transform:none;
}
    .nav li a:hover {
    margin:-3px;
    border:3px inset #66f;
    color:#ffffff;
    background:;
}


/* footer2 end */

/* footer pic start */
.pics {
    text-align:justify;
    width:100%;
    list-style:none;
    clear:both;
    min-width:820px;
}
.pics li {
    display:inline;
}
.pics li.last {
    margin-right:100%;
}
.pics li a {
    display:-moz-inline-box;
    display:inline-block;
}

/* footer pic end */

#headbanners {
	clear: both;
	background-color: #fff;
	border-top: 0px solid #702453;
	color:#622449;
	font-weight:bold;
	line-height: 1.2;
	overflow: hidden; /* contain the floats */
}
.sector {
color:#D68126;
font-weight:bold;
font-size:1.5em;
margin:0;
padding:0;
}

#headbanners p {
	float: left; /* line up adjacent */
	margin-left: -3px;
	border-left: 0px solid #702453;
	padding: 5px 2%;
	width: 29%; /* (29+2+2=33) */
	padding-top:30px;
	}
	
#headbanners p img {
	float: left;
	margin-right: 3%;
	width: 75px;
	height: 133px;
	padding-bottom:30px;
	padding-top:7px;
	}
	
#headbanners h2 {
	float: left; /* line up adjacent */
	margin-left: -3px;
	border-left: 0px solid #702453;
	padding: 5px 2%;
	width: 29%; /* (29+2+2=33) */
	padding-top:30px;
	font-size: 1em;
	}
	
#headbanners h2 img {
	float: left;
	margin-right: 3%;
	width: 75px;
	height: 133px;
	padding-bottom:30px;
	padding-top:7px;
	}
	
#headbanners h3 {
	float: left; /* line up adjacent */
	margin-left: -3px;
	border-left: 0px solid #702453;
	padding: 5px 2%;
	width: 29%; /* (29+2+2=33) */
	padding-top:30px;
	font-size: 1em;
	}
	
#headbanners h3 img {
	float: left;
	margin-right: 3%;
	width: 75px;
	height: 133px;
	padding-bottom:30px;
	padding-top:7px;
	}
	
	#headbanners h4 {
	float: left; /* line up adjacent */
	margin-left: -3px;
	border-left: 0px solid #702453;
	padding: 5px 2%;
	width: 29%; /* (29+2+2=33) */
	padding-top:30px;
	font-size: 1em;
	}
	
#headbanners h4 img {
	float: left;
	margin-right: 3%;
	width: 75px;
	height: 133px;
	padding-bottom:30px;
	padding-top:7px;
	}	
	
	#headbanners h5 {
	float: left; /* line up adjacent */
	margin-left: -3px;
	border-left: 0px solid #702453;
	padding: 5px 2%;
	width: 29%; /* (29+2+2=33) */
	padding-top:30px;
	font-size: 1em;
	}
	
#headbanners h5 img {
	float: left;
	margin-right: 3%;
	width: 75px;
	height: 133px;
	padding-bottom:30px;
	padding-top:7px;
	}
	
	#headbanners h6 {
	float: left; /* line up adjacent */
	margin-left: -3px;
	border-left: 0px solid #702453;
	padding: 5px 2%;
	width: 29%; /* (29+2+2=33) */
	padding-top:30px;
	font-size: 1em;
	}
	
#headbanners h6 img {
	float: left;
	margin-right: 3%;
	width: 75px;
	height: 133px;
	padding-bottom:30px;
	padding-top:7px;
	}						
	 /* a two line height to align and to have equal border height on the p in most width cases */ 

/*pause points*/

#points {	
	background-color: #fff;
	border-top: 0px solid #702453;
	color:#622449;
	font-weight:bold;
	line-height: 1.2;
	overflow: hidden; /* contain the floats */
	width: 50%;	
	float:left;
}

#points p {
	float: left; /* line up adjacent */
	margin-left: 3px;
	border-left: 0px solid #702453;
	padding:1%;
	width: 50%; /* (29+2+2=33) */
	font-size:1.2em;
	margin-top: 0px;	
}

#points img {
	float: left;
	margin-right: 3%;
	margin-left:0%;
	width: 75px;
	height: 109px; 
}
	
#points h1 { 
margin: 0 0 0 5px; 
padding: 3px;
color:#622449;
}	

#points h2 {
padding: 0;
margin: 0 0 0 15px;
color:#B5B43E;
}	
	
	
	/* a two line height to align and to have equal border height on the p in most width cases */ 


/*pause points ends*/
/*strap line*/
#strapline {
	clear: both;
	background-color: #fff;
	border-top: 0px solid #702453;
	color:#B5B43E;
	font-weight:bold;
	line-height:;	
	}
	


#strapline p img {
	float: left;
	margin-right: 3%;
	width: 119px;
	height: 105px; 
	
	/* a two line height to align and to have equal border height on the p in most width cases */ 
}

/*Hot line*/

#hotline {
	clear: both;
	background-color: #fff;
	border-top: 0px solid #702453;
	color:#622449;
	font-weight:bold;
	line-height: 1.2;
	overflow: hidden; /* contain the floats */
	font-family:font-family: arial, sans-serif;
	font-size:1em;
}

.callline {
font-family:font-family: arial, sans-serif;
color:#B5B43E;
font-size:1.1em;
}


#hotline h1 {
	border-left: 0px solid #702453;
	padding:1%;
	width: 100%; /* (29+2+2=33) */
	font-size: 2em;
}

#hotline h2 {
	float: right;
	border-left: 0px solid #702453;
	padding:1%;
	font-size: 1.5em;
}


#hotline h1 img {
	float: left;
	margin-right: 3%;	
}


#hotline .free {
float: right;
	margin-right: 3%;
	width: 90px;
	height: 90px;
	}
/*Hot line ends*/

/*end footer*/
#endfooter {
	clear: both;
	background-color: #fff;
	border-top: 0px solid #702453;
	color:grey;
	font-weight:normal;
	line-height: 1.2;
	overflow: hidden; /* contain the floats */
}
#endfooter p {
	float: left; /* line up adjacent */
	margin-left: -3px;
	border-left: 0px solid #702453;	
	width: 100%;
	font-size:13px;
	text-align:center;
	}
	 /* (29+2+2=33) */
/*end footer*/

#green {
margin-left:50%;
}

#column2 {
float:left;
clear:none;
position:relative;
width:50%;
overflow:hidden;
background-color: #fff;
border-top: 0px solid #702453;
color:#622449;
font-weight:bold;
}

#column2 p {	
margin: 0 0 0 15px;
padding-top: 3px;
padding-left: 2px;
color:#622449;
font-weight:bold;
padding-bottom:20px;
	}

#column2 h2 {
padding:0px;
margin: 0 0 0 15px;
color:#B5B43E;
}

#column2 h1 {
margin: 0 0 0 5px; 
padding-bottom:3px;
padding-top:3px;
color:#622449;
}	

#column2 p img {
	float: left;
	margin-right: 3%;
}

#content .paddingblast
{
padding:0px;
margin-left :10px;
color:#D68126;
font-family:Arial, Helvetica, sans-serif;
}

#leftnav .paddingblast
{
padding:0px;
margin-left :10px;
color:#D68126;
font-family:Arial, Helvetica, sans-serif;
}

#leftnav img
{
float:left;
}

#content img
{
float:left;
}

.column2 ul {
padding-left:170px;
}



.column2 ul li {
  margin: 0;
  padding: 2px 0 2px 16px;
  list-style: none;
  background: url('../images/green/tick.jpg') no-repeat top left;
}

.column2 {
background-color:#FFFFFF;
border-top:0 solid #702453;
clear:none;
color:#622449;
float:left;
font-weight:bold;
overflow:hidden;
position:relative;
width:50%;
margin-left:-1px;
}

.column2 h6 { 
padding: 0;
margin: 0 0 0 5px; 
color:#B5B43E;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
line-height: 1.5em;
}

.paddingblast { 
padding:0px;
margin-left :10px;
color:#D68126;
font-family:Arial, Helvetica, sans-serif;
}

.column2 img
{
float:left;
margin-left:15px;
display:inline;
margin-right:3px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>UK Office coffee services - rent office coffee service solutions - Call Suzy 01924 363 091 - pause...thoughtful refreshment</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
@import "css/homepage_draft1.css";
</style>
</head>
<body>
<div id="container">
<div id="hotline">
<h1><img src="images/testimonial/businessman_3.jpg" alt="Make money sell coffee" />Sell coffee make money</h1>
  <h2>&quot;When it costs 20p per cup and you sell for £2 per cup its easy to see why selling coffee remains one of the most lucrative business opportunities in retail&quot;. Mike Parkes - Senior business development manager for pause.</h2>
</div>
<div id="headbanners">
  <p><img src="images/model_machine/brav_therm.jpg" alt="Bravilor Therm" /><span class="sector">Pump coffee machines</span><br />
    Need a portable office coffee service? pause... refreshment recommends the <a href="pump_coffee_machine.html">Bravilor Therm</a>.</p>
  <p><img src="images/model_machine/koro_2.jpg" alt="Koro bean to cup" width="75" height="164" /><span class="sector">Coffee bean machines</span><br />
    Need to rent a coffee bean machine for the office? pause... refreshment recommends the <a href="koro_coffee_machine.html">koro coffee machine</a>.</p>
  <p><img src="images/model_machine/mondo2_2.jpg" alt="rent coffee machines for your corporation" /><span class="sector">Free coffee machine</span><br />
    Need a free coffee machine for the office? pause... refreshment recommends the <a href="mondo2_coffee_machine.html">free mondo 2 coffee machine</a>.</p>
</div>
<div id="headbanners">
  <p><img src="images/model_machine/vision_400_2.jpg" alt="Vision 400" /><span class="sector">Instant coffee maker</span><br />
    Need to rent an instant coffee maker for the office? pause refreshment recommends the <a href="vision_coffee_machine.html">Vision 400</a>.</p>
  <p><img src="images/model_machine/franke_flair.jpg" alt="franke flair" width="75" height="163" /><span class="sector">latte coffee machines</span><br />
    Need to rent a latte coffee machine for the office? pause... refreshment recommends the <a href="franke_coffee_machine.html">franke flair coffee machine</a>.</p>
  <p><img src="images/model_machine/franke_evolution2.jpg" alt="franke evolution" width="75" height="163" /><span class="sector">catering coffee machines</span><br />
    Need to rent a catering standard coffee machine for the office? pause... refreshment recommends the <a href="franke_evolution_coffee_machine.html">Franke Evolution</a>.</p>
</div>
<div style="clear:both"></div>
<div class="column2">
  <h6>Jet Petrol  choose pause</h6>
  <p class="paddingblast">"pause makes money for big fuel station chain"</p>
  <p><a href="#"><img src="images/testimonial/rob_150_150.jpg" alt="&quot;The i make from coffee is great&quot;" /></a>Jet 2 garages wanted to offer its customers coffee and earn good profit. Pause refreshment won the contract and now supplies Jet 2 garages with a total coffee service solution. "The margin I make on every cup sold is great" Rob Campbell - Area Manager</p>
  <ul>
  </ul>
</div>
<div class="column2">
  <h6>Toni & Guy choose pause</h6>
  <p class="paddingblast">"Prestige hair salon pick pause"</p>
  <p><a href="http://www.pauserefreshment.co.uk/hairdressing_coffee_machine.html"><img src="images/testimonial/toni_guy_black.jpg" alt="Fast rental coffee machine quotes" ></a>Toni & Guy chooses pause... refreshment to supply there salons with a total front of house coffee service. "We'd recommend pause.. refreshment to any business serious about improving front of house hospitality." Rebecca Gill - UK Toni & Guy Business Manager</p>
</div>
<div id="thumnails">
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <ul class="nav">
    <li><a href"#">Need a quote? Call David 01924 330 845 | </a><a href="mailto:david@pause.co.uk">david@pause.co.uk</a></li>
    <li><a href="bean_meets_machine.html">| &nbsp; best selling coffee machines</a></li>
  </ul>
  <div id="endfooter">
    <p>&copy; 2009 pause refreshment | Unit 3 128 Thornes Lane | Wakefield | West Yorkshire | WF2 7RE | 01924 363 091 | <a href="mailto:hello@pause.co.uk">hello@pause.co.uk</a></p>
  </div>
</div>
</body>
</html>

Hi, just unfloat the paragraph of text

#hotline h2{float:none;}

And then switch up that entire HTML to this :slight_smile:

<div id="hotline">
<h1>Sell coffee make money</h1><img alt="Make money sell coffee" src="images/testimonial/businessman_3.jpg" />
  <h2>"When it costs 20p per cup and you sell for &#163;2 per cup its easy to see why selling coffee remains one of the most lucrative business opportunities in retail". Mike Parkes - Senior business development manager for pause.</h2>
</div>

Add a class to the image, and give that float:left; :slight_smile:

Ryan thank you so much again - you fixed it :slight_smile:

You’re welcome :-).