Jump to content

pages align differently based on image size


jlodwick

Recommended Posts

I have 2 pages that are copies of each other with the exception of one of them has a smaller image on the page and it moves the whole page over a couple centimeters.  I have been working on this for a long time and I can't figure out why the size of the picture causes the whole page to shift.  The 2 pages are below.  By the way they are both using the same css sheets too.

 

http://www.babyboomermd.com/development/about-us.html

 

and

 

http://www.babyboomermd.com/development/about-us1.html

 

It shifts because a table cell tries to use only the minimum space necessary.  With a smaller image it is using less space.  That extra space gets allocated to the other cell instead.

 

If you want to cells to be a consistent size then you have to set their width using either CSS or the width attribute.  You are also missing your <tr></tr> tags around your cells.

 

<table>	
<tr>
	<td class="faceCompareCell">
		<img  src="design/facerejuv1.jpg" alt="Massage">
	</td>
	<td>
		Did you know that 10,000 baby boomers are retiring every day in the US?
		<br>
		<br>
		If "GROOVY" and (image of a piece symbol) meant something to you in the 60's than BHRT, BOTOX&reg, LASERS, WEIGHT MANAGEMENT AND WELLNESS should mean something to you <b>NOW</b>.
		<ul>
			<li>Optimize your hormones</li>
			<li>Look much younger</li>
			<li>Feel healthy and terrific</li>
			<li>Possess awesome energy</li>
		</ul>
	</td>
</tr>
</table>

 

Then add to your css

.faceCompareCell{
   width: 50%;
}

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.