Solved

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

Posted on 2011-09-15
12
767 Views
Last Modified: 2012-05-12
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
Comment
Question by:emilysbca
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 2
  • 2
  • +1
12 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36547518
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36547524
or you can just remove float left from your previous code
0
 
LVL 4

Expert Comment

by:AnuTiji
ID: 36547529
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Assisted Solution

by:phowell0820
phowell0820 earned 500 total points
ID: 36550948
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
 

Author Comment

by:emilysbca
ID: 36596273
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
 

Author Comment

by:emilysbca
ID: 36596449
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
 

Author Comment

by:emilysbca
ID: 36713839
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
 

Author Comment

by:emilysbca
ID: 36713841
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
 
LVL 1

Expert Comment

by:phowell0820
ID: 36713869
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
 

Author Comment

by:emilysbca
ID: 36714018
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
 

Accepted Solution

by:
emilysbca earned 0 total points
ID: 36714075
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
 

Author Closing Comment

by:emilysbca
ID: 36899011
the actual comment came from another post's answer, and I'll award his/her points there.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question