Solved

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

Posted on 2011-09-27
1
149 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Hovering effect 9 47
Wordpress CSS Link Issue 2 34
Centering Vertically 3 28
Why my select dropdown does not work? 8 26
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
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…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

920 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

13 Experts available now in Live!

Get 1:1 Help Now