Solved

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

Posted on 2011-09-15
12
745 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
  • 7
  • 2
  • 2
  • +1
12 Comments
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
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
Comment Utility
or you can just remove float left from your previous code
0
 
LVL 4

Expert Comment

by:AnuTiji
Comment Utility
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
 
LVL 1

Assisted Solution

by:phowell0820
phowell0820 earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:emilysbca
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
the actual comment came from another post's answer, and I'll award his/her points there.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

744 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now