asked on

Image and text positioning... how to unwrap the text in CSS?

I guess I'm basically looking to set up two columns, unless there is an easier way to get the text to NOT wrap around the image here. The CSS is inline just for this example....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>

	<head>
		<title></title>
	</head>
	<body>
<p style=""><a name="deadseasalt" id="deadseasalt"></a><strong><img src="images/ingredients/deadSeaSalt.jpg" width="100" height="67" hspace="5" style="padding: 0px 10px 0px 0px;
	float: left;" />Dead 
      Sea Salt</strong> - The waters from the Dead Sea are unique.They contain 
      27% of various salts as compared to 3% in normal sea water. <strong>Magnesium</strong> 
      is important for combating stress and fluid retention, slowing skin aging, 
      and calming the nervous system. <strong>Calcium</strong> is effective at 
      preventing water retention, increasing circulation and strengthening bones 
      and nails. <strong>Potassium</strong> energizes the body, helps to balance 
      skin moisture. <strong>Bromides</strong> act to ease muscle stiffness. <strong>Sodium</strong> 
      is important for the lymphatic fluid balance. Bathing in high quality sea 
      salt can replenish the minerals which are critical to our skin metabolism.</p>


	</body>
</html>

Open in new window

Gurvinder Pal Singh

try this code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>

	<head>
		<style>
			ul
			{
				list-style-type:none;
			}
			li
			{
				float:left;
			}
		</style>
	</head>
	<body>
<ul>
	<li><strong><img src="lastscan.jpg" width="100" height="67"/></li>
	<li>Dead 
      Sea Salt</strong> - The waters from the Dead Sea are unique.They contain 
      27% of various salts as compared to 3% in normal sea water. <strong>Magnesium</strong> 
      is important for combating stress and fluid retention, slowing skin aging, 
      and calming the nervous system. <strong>Calcium</strong> is effective at 
      preventing water retention, increasing circulation and strengthening bones 
      and nails. <strong>Potassium</strong> energizes the body, helps to balance 
      skin moisture. <strong>Bromides</strong> act to ease muscle stiffness. <strong>Sodium</strong> 
      is important for the lymphatic fluid balance. Bathing in high quality sea 
      salt can replenish the minerals which are critical to our skin metabolism.
	</li>
</ul>


	</body>
</html>

Open in new window

Gurvinder Pal Singh

or you can just remove float left from your previous code

AnuTiji

Hi

If we place the text contents in a div with float:right, the image and text will appear as two columns. The above html code has been rewritten and is pasted below for reference

<html>

 <head>
 <title></title>
 </head>
 <body>
<a name="deadseasalt" id="deadseasalt"></a><img src="images/ingredients/deadSeaSalt.jpg" width="100" height="67" hspace="5" style="padding: 0px 10px 0px 0px;
 float: left;" /><div style="float:right">Dead
Sea Salt - The waters from the Dead Sea are unique.They contain
27% of various salts as compared to 3% in normal sea water. Magnesium
is important for combating stress and fluid retention, slowing skin aging,
and calming the nervous system. Calcium is effective at
preventing water retention, increasing circulation and strengthening bones
and nails. Potassium energizes the body, helps to balance
skin moisture. Bromides act to ease muscle stiffness. Sodium
is important for the lymphatic fluid balance. Bathing in high quality sea
salt can replenish the minerals which are critical to our skin metabolism.</div>
 </body>
</html>

SOLUTION

phowell0820

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

emilysbca

ASKER

phowell0820 yours was the only solution that worked. But I guess since you are an Administrator I can't choose your post as The Solution?

emilysbca

ASKER

P.S. I am using an external style sheet, but just for this example I included it right in. Thanks for the css tips, I am self-taught and I always welcome corrections :-)

emilysbca

ASKER

An issue comes up once I enter more than one image/text combo.... each new entry gets pushed in by the previous image. Please see what you think, I've added a border to the image container so you can see it clearly. I need the height to be either the image or the text, which ever is greater. It seems the image height is pushing things out of whack.

emilysbca

ASKER

Oops, here is the code:

<html>
<head>
<title></title>
    	<style type="text/css">
    	  .deadsea-image{
    	    float: left;
    	    height: 100%;
            border-style: solid;
            border-width: 1px;
    	  }
    	</style>
    </head>
    <body>
    	<div class="deadsea-image">
    		<a name="deadseasalt" id="deadseasalt"></a>
    		<img src="images/ingredients/deadSeaSalt.jpg" width="100" height="67" hspace="5" style="padding: 0px 10px 0px 0px; float: left;" />
    	</div>
    	<div class="deadsea-text">
    		<p>Dead Sea Salt</strong> - The waters from the Dead Sea are unique.They contain 27% of various salts as compared to 3% in normal sea water. <strong>Magnesium</strong> is important for combating stress and fluid retention slowing skin aging,
      		and calming the nervous system. <strong>Calcium</strong> is effective at
      		preventing water retention, increasing circulation and strengthening bones
      		and nails. <strong>Potassium</strong> energizes the body, helps to balance
      		skin moisture. <strong>Bromides</strong> act to ease muscle stiffness. <strong>Sodium</strong> is important for the lymphatic fluid balance. Bathing in high quality sea salt can replenish the minerals which are critical to our skin metabolism.</p>
      	</div>
<div class="deadsea-image">
    		<a name="deadseasalt" id="deadseasalt"></a>
    		<img src="images/ingredients/deadSeaSalt.jpg" width="100" height="67" hspace="5" style="padding: 0px 10px 0px 0px; float: left;" />
    	</div>
    	<div class="deadsea-text">
    		<p>Dead Sea Salt</strong> - The waters from the Dead Sea are unique.They contain 27% of various salts as compared to 3% in normal sea water. <strong>Magnesium</strong> is important for combating stress and fluid retention slowing skin aging,
      		and calming the nervous system. <strong>Calcium</strong> is effective at
      		preventing water retention, increasing circulation and strengthening bones
      		and nails. <strong>Potassium</strong> energizes the body, helps to balance
      		skin moisture. <strong>Bromides</strong> act to ease muscle stiffness. <strong>Sodium</strong> is important for the lymphatic fluid balance. Bathing in high quality sea salt can replenish the minerals which are critical to our skin metabolism.</p>
      	</div>
<div class="deadsea-image">
    		<a name="deadseasalt" id="deadseasalt"></a>
    		<img src="images/ingredients/deadSeaSalt.jpg" width="100" height="67" hspace="5" style="padding: 0px 10px 0px 0px; float: left;" />
    	</div>
    	<div class="deadsea-text">
    		<p>Dead Sea Salt</strong> - The waters from the Dead Sea are unique.They contain 27% of various salts as compared to 3% in normal sea water. <strong>Magnesium</strong> is important for combating stress and fluid retention slowing skin aging,
      		and calming the nervous system. <strong>Calcium</strong> is effective at
      		preventing water retention, increasing circulation and strengthening bones
      		and nails. <strong>Potassium</strong> energizes the body, helps to balance
      		skin moisture. <strong>Bromides</strong> act to ease muscle stiffness. <strong>Sodium</strong> is important for the lymphatic fluid balance. Bathing in high quality sea salt can replenish the minerals which are critical to our skin metabolism.</p>
      	</div>

    </body>
</html>

Open in new window

phowell0820

If you add another wrapper div to contain the image and text, it should fix your problem. The problem with my previous entry was that the height of the image was set to 100%, which without a container is 100% of the page.

Adding the container makes it so the image is 100% of the height of the deadsea-wrapper div, and also makes sure that all entries are completely separate entities from one another. Just add a deadsea-wrapper div around each image/text group and it should work fine. Let me know if you need any more help.

<div class="deadsea-wrapper">
  <div class="deadsea-image">
    		<a name="deadseasalt" id="deadseasalt"></a>
    		<img src="images/ingredients/deadSeaSalt.jpg" width="100" height="67" hspace="5" style="padding: 0px 10px 0px 0px; float: left;" />
    	</div>
    	<div class="deadsea-text">
    		<p>Dead Sea Salt</strong> - The waters from the Dead Sea are unique.They contain 27% of various salts as compared to 3% in normal sea water. <strong>Magnesium</strong> is important for combating stress and fluid retention slowing skin aging,
      		and calming the nervous system. <strong>Calcium</strong> is effective at
      		preventing water retention, increasing circulation and strengthening bones
      		and nails. <strong>Potassium</strong> energizes the body, helps to balance
      		skin moisture. <strong>Bromides</strong> act to ease muscle stiffness. <strong>Sodium</strong> is important for the lymphatic fluid balance. Bathing in high quality sea salt can replenish the minerals which are critical to our skin metabolism.</p>
      	</div>
</div>

Open in new window

emilysbca

ASKER

I have tried that in other attempts.... did it again here but with no results:

http://www.naturaculina.com/ingredients7.html

I thought of adding a fixed height to the wrapper but the text for the image could be minimal or several paragraphs. How can I set the height of the wrapper to be whichever is greater... the image height or text height? Maybe javascript?

<html>
<head>
<title></title>
    	<style type="text/css">
    	  .deadsea-image{
    	    float: left;
    	    height: 100%;
            border-style: solid;
            border-width: 1px;
    	  }

    	</style>
    </head>
    <body>
    	<div class="deadsea-wrapper">
  <div class="deadsea-image">
    		<a name="deadseasalt" id="deadseasalt"></a>
    		<img src="images/ingredients/deadSeaSalt.jpg" width="100" height="67" hspace="5" style="padding: 0px 10px 0px 0px; float: left;" />
    	</div>
    	<div class="deadsea-text">
    		<p>Dead Sea Salt</strong> - The waters from the Dead Sea are unique.They contain 27% of various salts as compared to 3% in normal sea water. <strong>Magnesium</strong> is important for combating stress and fluid retention slowing skin aging,
      		and calming the nervous system. <strong>Calcium</strong> is effective at
      		preventing water retention, increasing circulation and strengthening bones
      		and nails. <strong>Potassium</strong> energizes the body, helps to balance
      		skin moisture. <strong>Bromides</strong> act to ease muscle stiffness. <strong>Sodium</strong> is important for the lymphatic fluid balance. Bathing in high quality sea salt can replenish the minerals which are critical to our skin metabolism.</p>
      	</div>
</div><!-- end wrapper -->
<div class="deadsea-wrapper">
<div class="deadsea-image">
    		<a name="deadseasalt" id="deadseasalt"></a>
    		<img src="images/ingredients/deadSeaSalt.jpg" width="100" height="67" hspace="5" style="padding: 0px 10px 0px 0px; float: left;" />
    	</div>
    	<div class="deadsea-text">
    		<p>Dead Sea Salt</strong> - The waters from the Dead Sea are unique.They contain 27% of various salts as compared to 3% in normal sea water. <strong>Magnesium</strong> is important for combating stress and fluid retention slowing skin aging,
      		and calming the nervous system. <strong>Calcium</strong> is effective at
      		preventing water retention, increasing circulation and strengthening bones
      		and nails. <strong>Potassium</strong> energizes the body, helps to balance
      		skin moisture. <strong>Bromides</strong> act to ease muscle stiffness. <strong>Sodium</strong> is important for the lymphatic fluid balance. Bathing in high quality sea salt can replenish the minerals which are critical to our skin metabolism.</p>
      	</div>
</div><!-- end wrapper -->
<div class="deadsea-wrapper">
<div class="deadsea-image">
    		<a name="deadseasalt" id="deadseasalt"></a>
    		<img src="images/ingredients/deadSeaSalt.jpg" width="100" height="67" hspace="5" style="padding: 0px 10px 0px 0px; float: left;" />
    	</div>
    	<div class="deadsea-text">
    		<p>Dead Sea Salt</strong> - The waters from the Dead Sea are unique.They contain 27% of various salts as compared to 3% in normal sea water. <strong>Magnesium</strong> is important for combating stress and fluid retention slowing skin aging,
      		and calming the nervous system. <strong>Calcium</strong> is effective at
      		preventing water retention, increasing circulation and strengthening bones
      		and nails. <strong>Potassium</strong> energizes the body, helps to balance
      		skin moisture. <strong>Bromides</strong> act to ease muscle stiffness. <strong>Sodium</strong> is important for the lymphatic fluid balance. Bathing in high quality sea salt can replenish the minerals which are critical to our skin metabolism.</p>
      	</div>
</div><!-- end wrapper -->

    </body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

emilysbca

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

emilysbca

ASKER

the actual comment came from another post's answer, and I'll award his/her points there.