CSS - is two-column layout or table layout better for this information?
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?
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’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>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.