Hi guys,

 

I have a product page in which all i want is a logo on the left and description to the right. But for some reason the second entry it is putting the logo in the centre rather than on the left?!

 

Can anyone tell me why?

 

What it should look like:

 

 

What it DOES look like:

 

 

HTML Code:

 

<div class="bundle">
   <div class="bundle_logo"><a href="(REMOVED FOR PRIVACY)/index.html"><img style="margin-left:11px; margin-top:35px;margin-bottom:30px; padding-bottom:18px" src="../../images/(REMOVED FOR PRIVACY).png" border="0" width="152" height="65"/></a></div>
   <div class="bundle_text">
   <div class="index_content_title">
   <p><strong>(REMOVED FOR PRIVACY)</strong>(REMOVED FOR PRIVACY)</p></div>
     <p><span class="entry" style="font-size:11px">(REMOVED FOR PRIVACY)</span></p>
     <p><span class="entry" style="font-size:11px">(REMOVED FOR PRIVACY)</span></p>
   </div>
   </div>
   </div>

 

(x2)

 

CSS Code:

 

.bundle {
}

.bundle_logo {
float:left;
}

.bundle_text {
float:right;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
margin-left:10px;
width: 500px;
}

.bundle {
}

 

Icant link to the testbed site that this is currently linked on as it has an IP filter on it to only allow people access from specific IPs.

This is not a complete answer, but I'd like to start you off -

 

The image styles should be controlled in your CSS file, not inline CSS like you have here:-

 

<img style="margin-left:11px; margin-top:35px;margin-bottom:30px; padding-bottom:18px"...

 

This should be removed.

 

Also, remove this from your images:-

 

border="0" width="152" height="65"

 

That also should be set in your CSS file.

 

Each 'bundle' div class should have a width set in the CSS file, whatever the full width of your page. If you could get a working link somehow it would be easier for us to see and test..

Edited August 11, 201115 yr by oakleaves

You shouldn't have to float the text to the right if it's only the image you want clinging to the side. The text will follow the flow around the image.

 

Start by removing the right float on the text, and then we can take another look at it.

Try this...

 

HTML

<div class="bundle">
   <div class="bundle_logo">
   	<a href="(REMOVED FOR PRIVACY)/index.html"><img src="../../images/(REMOVED FOR PRIVACY).png" border="0" width="152" height="65"/></a>
   </div>
   <div class="bundle_text">
   	<h3>Title</h3>
   	<p><span class="entry" style="font-size:11px">(REMOVED FOR PRIVACY)</span></p>
   	<p><span class="entry" style="font-size:11px">(REMOVED FOR PRIVACY)</span></p>
   </div>
</div>

<div class="bundle">
   <div class="bundle_logo">
   	<a href="(REMOVED FOR PRIVACY)/index.html"><img src="../../images/(REMOVED FOR PRIVACY).png" border="0" width="152" height="65"/></a>
   </div>
   <div class="bundle_text">
   	<h3>Title</h3>
   	<p><span class="entry" style="font-size:11px">(REMOVED FOR PRIVACY)</span></p>
   	<p><span class="entry" style="font-size:11px">(REMOVED FOR PRIVACY)</span></p>
   </div>
</div>

 

CSS

.bundle_logo {
       float:left;
	margin-right: 30px;
}

.bundle_text {
       font-family: Arial, Helvetica, sans-serif;
       font-size:11px;
       width: 500px;
	margin-bottom: 40px;
}

 

Also cleaned up the code; it had an necessary number of divs and conflicting styles.

Cheers guys,

 

Alluzion, i used your changes and it solved 99% of the problem. 1 extra change and it's now exactly how i want it. Cheers!

Cheers guys,

 

Alluzion, i used your changes and it solved 99% of the problem. 1 extra change and it's now exactly how i want it. Cheers!

 

No problem, glad I could help