Solved

CSS - is two-column layout or table layout better for this information?

Posted on 2011-09-27
1
148 Views
Last Modified: 2012-05-12
I'm having a heck of a time.  I have 10 or so "entries" consisting of an image and descriptive text.  The image would go in the first column.  The descriptive text for that particular image goes in the 2nd column.  However, there is a table aspect in that the text for each image needs to begin flush with the image's top border, and if the text takes up more vertical space than the image, it does not wrap around the image.  The closest I have gotten is this:

http://www.naturaculina.com/ingredients3.html (code for it is attached)

but the text wraps around.  I've tried putting a wrapper around each "entry" and making the 2 columns in the entry be 100%, the results I'm getting are too much space between entries, or the entries cascading in as if they were in outline format (due I think to the 1st column height being set to 100%, don't know for sure).  

I'm ready to give up and go with an html table and maybe that is the best solution anyway.  Does anyone have any ideas?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta name="description" content=""/>
	<meta name="keywords" content=""/>
	<link rel="shortcut icon" href="" />
	<!--<link rel="stylesheet" type="text/css" href="style.css" />-->	
	<title>Natura Culina :: Ingredients</title>

    	<style type="text/css">
          .container {
           //border-style: solid;            
           border-width: 3px;
           border-color: green;
		   height: 7em;
}
    	  .ingredient-image{
    	    float: left;
    	    height: 100%;
            padding: 0px 10px 0px 0px;
            //border-style: solid;            
            border-width: 1px;
    	  }
		  .ingredient-text{
           //border-style: solid;            
           border-width: 4px;
           border-color: red;
height: 100%;
          }
    	</style>
    </head>
    <body>
<div class="allcontent">
  
   <div class="textArea"><br />
      
    <div align="center">
      <p><span class="header1">Ingredients (more descriptions to come)</span></p>
      
    </div>
<div class="container">
<div class="ingredient-image">
    		<a name="calendula" id="calendula"></a>
    		<img src="images/ingredients/calendulaSm2.jpg" width="100" height="92"/>
    	</div>
    	<div class="ingredient-text">
    		<p><strong>Calendula</strong> 
      - One of the most effective topical oils. Gentle, cooling, and soothing. Calendula oil is a successful treatment for dry and damaged skin, skin inflammations, rashes, diaper irritations, and other skin problems. Makes a wonderful baby's oil and is exceptional for those with sensitive skin. Calendula oil also has antiseptic, anti fungal, anti-inflammatory, and antibacterial properties, making it a great option for treating skin infections.</p>
      	</div>
</div>
<div class="container">
<div class="ingredient-image">
    		<a name="coconutOil" id="coconutOil"></a>
    		<img src="images/ingredients/CocoaSm.jpg" width="100" height="67"/>
    	</div>
    	<div class="ingredient-text">
    		<p><strong>Cocoa Butter</strong> 
      - Pressed from seeds of the Cacao tree (Theobroma cacao)  Helps reduce cutaneous dryness and improves  skin elasticity. A significant source of antioxidants, especially vitamin E.
</p>
      	</div>
</div>
<div class="container">
<div class="ingredient-image">
    		<a name="coconutOil" id="coconutOil"></a>
    		<img src="images/ingredients/CoconutSm.jpg" width="100" height="72"/>
    	</div>
    	<div class="ingredient-text">
    		<p><strong>Coconut 
      Oil</strong> - This highly nutritious oil is rich in fiber, vitamins, and 
      minerals, supporting the tissue&#8217;s healing and repairing properties. 
      It helps protect the skin from harmful free radicals that promote premature 
      ageing. Coconut oil is a natural moisturizer that softens the skin, helps 
      relieve dryness and flaking, and prevents wrinkles, sagging skin, and age 
      spots.</p>
      	</div>
</div>
<div class="container">
        <div class="ingredient-image">
    		<a name="deadseasalt" id="deadseasalt"></a>
    		<img src="images/ingredients/deadSeaSalt.jpg" width="100" height="67"/>
    	</div>
    	<div class="ingredient-text">
    		<p><strong>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>
<div class="container">
<div class="ingredient-image">
    		<a name="epsomSalt" id="epsomSalt"></a>
    		<img src="images/ingredients/epsom.jpg" width="100" height="96"/>
    	</div>
    	<div class="ingredient-text">
    		<p><strong>Epsom Salts</strong> 
      - Epsom salt  is not actually salt but a naturally occurring pure mineral compound of magnesium and sulfate. Long known as a natural remedy for a number of ailments, Epsom salt has numerous health benefits.</p><p>

Studies have shown that magnesium and sulfate are both readily absorbed through the skin, making Epsom salt baths an easy and ideal way to enjoy the amazing health benefits. Magnesium plays a number of roles in the body including regulating the activity of over 325 enzymes, reducing inflammation, helping muscle and nerve function and helping to prevent artery hardening. Sulfates help improve the absorption of nutrients, flush toxins and help ease migraine headaches.
</p>
      	</div>
</div>

<div class="container">
<div class="ingredient-image">
    		<a name="" id=""></a>
    		<img src="images/ingredients/deadSeaSalt.jpg" width="100" height="67"/>
    	</div>
    	<div class="ingredient-text">
    		<p></p>
      	</div>
</div>
</div><!-- end textArea -->
</div><!-- end allcontent -->

    </body>
</html>

Open in new window

0
Comment
Question by:emilysbca
1 Comment
 
LVL 16

Accepted Solution

by:
SSupreme earned 500 total points
ID: 36714005
Have a look:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta name="description" content=""/>
	<meta name="keywords" content=""/>
	<link rel="shortcut icon" href="" />
	<!--<link rel="stylesheet" type="text/css" href="style.css" />-->	
	<title>Natura Culina :: Ingredients</title>

    	<style type="text/css">
          .container {
           //border-style: solid;            
           border-width: 3px;
           border-color: green;
		   //height: 7em;
		   clear:both;
		   overflow:hidden;
		  
}
    	  .ingredient-image{
    	    float: left;
    	    //height: 100%;
            padding: 0px 10px 0px 0px;
            //border-style: solid;            
            border-width: 1px;
    	  }
		  .ingredient-text{
           //border-style: solid; 		   
           border-width: 4px;
		   margin:0;
		   padding:0;
           border-color: red;
		   float: left;
		   width:500px;
		   //height: 100%;
          }
		  .ingredient-text p, p strong {
		  margin:0;
		   padding:0;}
		  
    	</style>
    </head>
    <body>
<div class="allcontent">
  
   <div class="textArea"><br />
      
    <div align="center">
      <p><span class="header1">Ingredients (more descriptions to come)</span></p>
      
    </div>
<div class="container">
<div class="ingredient-image">
    		<a name="calendula" id="calendula"></a>
    		<img src="images/ingredients/calendulaSm2.jpg" width="100" height="92"/>
    	</div>
    	<div class="ingredient-text">
    		<p><strong>Calendula</strong> 
      - One of the most effective topical oils. Gentle, cooling, and soothing. Calendula oil is a successful treatment for dry and damaged skin, skin inflammations, rashes, diaper irritations, and other skin problems. Makes a wonderful baby's oil and is exceptional for those with sensitive skin. Calendula oil also has antiseptic, anti fungal, anti-inflammatory, and antibacterial properties, making it a great option for treating skin infections.</p>
      	</div>
</div>
<div class="container">
<div class="ingredient-image">
    		<a name="coconutOil" id="coconutOil"></a>
    		<img src="images/ingredients/CocoaSm.jpg" width="100" height="67"/>
    	</div>
    	<div class="ingredient-text">
    		<p><strong>Cocoa Butter</strong> 
      - Pressed from seeds of the Cacao tree (Theobroma cacao)  Helps reduce cutaneous dryness and improves  skin elasticity. A significant source of antioxidants, especially vitamin E.
</p>
      	</div>
</div>
<div class="container">
<div class="ingredient-image">
    		<a name="coconutOil" id="coconutOil"></a>
    		<img src="images/ingredients/CoconutSm.jpg" width="100" height="72"/>
    	</div>
    	<div class="ingredient-text">
    		<p><strong>Coconut 
      Oil</strong> - This highly nutritious oil is rich in fiber, vitamins, and 
      minerals, supporting the tissue&#8217;s healing and repairing properties. 
      It helps protect the skin from harmful free radicals that promote premature 
      ageing. Coconut oil is a natural moisturizer that softens the skin, helps 
      relieve dryness and flaking, and prevents wrinkles, sagging skin, and age 
      spots.</p>
      	</div>
</div>
<div class="container">
        <div class="ingredient-image">
    		<a name="deadseasalt" id="deadseasalt"></a>
    		<img src="images/ingredients/deadSeaSalt.jpg" width="100" height="67"/>
    	</div>
    	<div class="ingredient-text">
    		<p><strong>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>
<div class="container">
<div class="ingredient-image">
    		<a name="epsomSalt" id="epsomSalt"></a>
    		<img src="images/ingredients/epsom.jpg" width="100" height="96"/>
    	</div>
    	<div class="ingredient-text">
    		<p><strong>Epsom Salts</strong> 
      - Epsom salt  is not actually salt but a naturally occurring pure mineral compound of magnesium and sulfate. Long known as a natural remedy for a number of ailments, Epsom salt has numerous health benefits.</p><p>

Studies have shown that magnesium and sulfate are both readily absorbed through the skin, making Epsom salt baths an easy and ideal way to enjoy the amazing health benefits. Magnesium plays a number of roles in the body including regulating the activity of over 325 enzymes, reducing inflammation, helping muscle and nerve function and helping to prevent artery hardening. Sulfates help improve the absorption of nutrients, flush toxins and help ease migraine headaches.
</p>
      	</div>
</div>

<div class="container">
<div class="ingredient-image">
    		<a name="" id=""></a>
    		<img src="images/ingredients/deadSeaSalt.jpg" width="100" height="67"/>
    	</div>
    	<div class="ingredient-text">
    		<p></p>
      	</div>
</div>
</div><!-- end textArea -->
</div><!-- end allcontent -->

    </body>
</html>

Open in new window

0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

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…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

747 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

10 Experts available now in Live!

Get 1:1 Help Now