Align image on left and text on right using css - html

Question

I need to align image on left and text on right. I am using the following css.
body {} #slideshow-nav {
width: 700px;
height: 30px;
position: absolute;
z-index: 999;
bottom: 0;
left: 11px;
text-align: center;
text-decoration: none;
}
#slideshow-nav a {
background: transparent url('../Image/bullet_grey - 1.png') 0 0 no-repeat;
width: 26px;
height: 26px;
text-indent: -999px;
display: inline-block;
text-decoration: none;
margin: 7px;
text-indent: -9999px !important;
margin: 7px;
text-decoration: none;
background-position: center;
border: none;
outline: none;
}
#slideshow-nav a.activeSlide {
background-position: 0 -1000px;
background: transparent url('../Image/bullet_red.png') 0 0 no-repeat;
display: inline-block;
background-position: center;
text-decoration: none;
border: none;
outline: none;
}
.page-slideshow {
position: relative;
margin-bottom: 15px;
text-decoration: none;
background: #d4ecef;
}
.page-slideshow.narrow #slideshow-nav {
width: 460px;
left: 0;
text-decoration: none;
}
.di-hero {
background: transparent;
width: 718px;
height: 300px;
background-position: 11px 0;
background-repeat: no-repeat;
}
p.more {
margin: 8px 0 0 0;
float: right;
overflow: hidden;
color: #BC1E04;
text-decoration: none;
color: #bc1e04;
margin: 5px 0 0 0;
text-align: center;
float: right;
}
h3 {
display: block;
color: #514c44;
font: 18px/24px Georgia, "Times New Roman", Palatino, "Palatino Linotype", "Book Antiqua", serif;
margin: 0 0 10px 0;
float: right;
overflow: hidden;
text-decoration: none;
margin: 5px 0 0 0;
text-align: center;
float: right;
}
div.slide-content img {
margin: 0 20px 0 0;
border: 5px solid #5999a2;
}
p {
color: #2e2e2a;
margin: 0 0 10px 0;
float: right;
overflow: hidden;
text-decoration: none;
font: 12px/18px Helvetica, "Lucida Sans", "Trebuchet MS", Arial, Verdana, sans-serif;
text-align: center;
float: right;
}
p.more:hover {
text-decoration: underline;
}
.slide-content {
width: 718px;
height: 300px;
background-position: 11px 0;
background-repeat: no-repeat;
}
<div class="page-slideshow narrow">
<div class="hero di-hero">
<div>
<a href="" title="Delicious Ideas from AllRecipes.com">
<div class="slide-content">
<img src="" width="152" height="150" alt="Delicious Ideas from AllRecipes.com">
<h3>Delicious Ideas from AllRecipes.com</h3>
<p>BI-LO has teamed up with AllRecipes.com to provide enhanced recipe searches, regionally inspired recipes, ratings, videos and more.</p>
<p class="more">Find the perfect recipe</p>
</div>
</a>
</div>
<div>
<a href="" title="Meal Planning Made Simple">
<div class="slide-content">
<img src="." width="152" height="150" alt="Meal Planning Made Simple">
<h3>Meal Planning Made Simple</h3>
<p>Whether you're preparing a romantic valentine's dinner or having friends over to watch the big game, our meal planning guide can help.</p>
<p class="more">Start planning today</p>
</div>
</a>
</div>
<div>
<a href="" title="Improve Your Wine & Beer IQ">
<div class="slide-content">
<img src="" width="152" height="150">
<h3>Improve Your Wine & Beer IQ</h3>
<p>The right glass of wine or beer can turn a good meal into a great one. Let us help you take the mystery out of beer and wine shopping.</p>
<p class="more">Learn the basics of wine and beer</p>
</div>
</a>
</div>
<div>
<a href="" title="Learn How to Pick the Perfect Meat">
<div class="slide-content">
<img src="." width="152" height="150" alt="Learn How to Pick the Perfect Meat">
<h3>Learn How to Pick the Perfect Meat</h3>
<p>We’ve got all of the information you need to help you choose the right type of meat for your meal.</p>
<p class="more">See our meat and seafood guide</p>
</div>
</a>
</div>
</div>
<div id="slideshow-nav">
<div>
</div>
</div>
</div>
Now my image is on the Left and text on the right. But it is not properly aligned. I need text on the same line and on the right to the image. Which style element is missing ..? please help me.

Answer 1

Here is the fiddle link
just added following css
.imgDes {
margin-left: 180px;
overflow: hidden;
text-align: left;
}
.imgDes p {
text-align: right;
}
<div class="slide-content">
<img src="http://static.adzerk.net/Advertisers/fdec4733b4814d9e958b7f86c25020b5.jpg" width="152" height="150" alt="Delicious Ideas from AllRecipes.com">
<div class="imgDes">
<h3>Delicious Ideas from AllRecipes.com</h3>
<p>BI-LO has teamed up with AllRecipes.com to provide enhanced recipe searches, regionally inspired recipes, ratings, videos and more.</p>
<p class="more">Find the perfect recipe</p>
</div>
</div>

Answer 2

I'm not sure if this actually helps you but here is how I probably would have done it:
.container {
width:500px;
}
.imageclass {
float:left;
width:200px;
height:20px;
}
.textclass {
float:left;
width:300px;
height:20px;
}
<div class="container">
<p class="imageclass"><img src... /></p>
<p class="textclass">text...</p>
</div>
I used this exact code in one page I did, and it worked fine getting the paragraphs in the same line. You can probably change the paragraphs for divs, and you of course have to change the numbers so it fits on your page.

Answer 3

<table width="100%">
<tr>
<td align="left" valign="top">image</td>
<td align="left" valign="top">text</td>
</tr>
</table>
this way the text and the picture are in the same line

Answer 4

You could allways use tables in divs (Fiddle example here) like this:
<div class="page-slideshow narrow">
<div class="hero di-hero">
<div>
<a href="" title="Delicious Ideas from AllRecipes.com">
<div class="slide-content">
<table>
<tr>
<td>
<img src="" width="152" height="150" alt="Delicious Ideas from AllRecipes.com" style="float:left" >
</td>
<td>
<h3>Delicious Ideas from AllRecipes.com</h3>
<p>BI-LO has teamed up with AllRecipes.com to provide enhanced recipe searches, regionally inspired recipes, ratings, videos and more.</p>
<p class="more">Find the perfect recipe</p>
</td>
</tr>
</table>
</div>
</a>
</div>
<div>
<a href="" title="Meal Planning Made Simple">
<div class="slide-content">
<table>
<tr>
<td>
<img src="." width="152" height="150" alt="Meal Planning Made Simple" style="float:left">
</td>
<td>
<h3>Meal Planning Made Simple</h3>
<p>Whether you're preparing a romantic valentine's dinner or having friends over to watch the big game, our meal planning guide can help.</p>
<p class="more">Start planning today</p>
</td>
</tr>
</table>
</div>
</a>
</div>
<div>
<a href="" title="Improve Your Wine & Beer IQ">
<div class="slide-content">
<table>
<tr>
<td>
<img src="" width="152" height="150" style="float:left" >
</td>
<td>
<h3>Improve Your Wine & Beer IQ</h3>
<p>The right glass of wine or beer can turn a good meal into a great one. Let us help you take the mystery out of beer and wine shopping.</p>
<p class="more">Learn the basics of wine and beer</p>
</td>
</tr>
</table>
</div>
</a>
</div>
<div>
<a href="" title="Learn How to Pick the Perfect Meat">
<div class="slide-content">
<table>
<tr>
<td>
<img src="." width="152" height="150" alt="Learn How to Pick the Perfect Meat">
</td>
<td>
<h3>Learn How to Pick the Perfect Meat</h3>
<p>We’ve got all of the information you need to help you choose the right type of meat for your meal.</p>
<p class="more">See our meat and seafood guide</p>
</td>
</tr>
</table>
</div>
</a>
</div>
</div>
<div id="slideshow-nav">
<div>
</div>
</div>
</div>