• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 785
  • Last Modified:

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

0
emilysbca
Asked:
emilysbca
  • 7
  • 2
  • 2
  • +1
2 Solutions
 
Gurvinder Pal SinghCommented:
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

0
 
Gurvinder Pal SinghCommented:
or you can just remove float left from your previous code
0
 
AnuTijiCommented:
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>
<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;" /></p><p><div style="float:right">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.</div></p>
      </body>
</html>
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
phowell0820Commented:
Here is a solution that only uses 2 lines of CSS to provide a flexible solution that works across all browsers and screen sizes.  By setting the image div's height to 100% and floating it, you create a div that takes up a fixed width but automatically extends to the bottom of your container every time.  If this doesn't work you can also try adding display: block; to the .deadsea-image CSS call, which will make the div take up 100% of the space that it is given, even if it's empty.

I also edited your HTML a bit as there were a few strange things like enclosing divs in paragraph tags (should be the other way around 99.99% of the time).

If you have several pages that you need CSS applied to, you might also want to consider using an external Style Sheet.  Just google external CSS for a quick tutorial on how to create one.
<html>
	<head>
    	<title></title>
    	<style type="text/css">
    	  .deadsea-image{
    	    float: left;
    	    height: 100%;
    	  }
    	</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>
    </body>
</html>

Open in new window

0
 
emilysbcaAuthor Commented:
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?
0
 
emilysbcaAuthor Commented:
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 :-)
0
 
emilysbcaAuthor Commented:
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.
0
 
emilysbcaAuthor Commented:
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

0
 
phowell0820Commented:
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

0
 
emilysbcaAuthor Commented:
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

0
 
emilysbcaAuthor Commented:
Wait!!!  Another post related to the same thing fixed it.  

The container needed to be this:

 .container {
               clear:both;
               overflow:hidden;
             
}


I need to take a look at those properties and what they do.  I never would have figured this out on my own.

http://www.naturaculina.com/ingredients8.html
0
 
emilysbcaAuthor Commented:
the actual comment came from another post's answer, and I'll award his/her points there.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 7
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now