Solved

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

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Put shading on half of picture 8 42
Slider Moving to right hand side CSS? 2 22
Divi Theme - extra fonts I don't want 13 25
Change div area and length 1 26
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses four methods for overlaying images in a container on a web page
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…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

776 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