[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

CSS

Posted on 2011-09-25
10
Medium Priority
?
236 Views
Last Modified: 2012-05-12
This is supposed to mimic a 2-column layout... the images in one column, the text in the next column (with navigation and header above spanning the two columns).  2 divs make up each entry (an image with some text).  If you take out the height attribute in the image-text class, the entries cascade inward... each one tabs in.  With the height attribute there, the alignment is correct however there is way too much space between entries, and it increases with each new entry.  I'm not sure what is wrong here.  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
	<head>
	<title></title>

    	<style type="text/css">
    	  .ingredient-image{
    	    float: left;
    	    height: 100%;
            padding: 0px 10px 0px 0px;
    	  }
		  .ingredient-text{
            height: 100%;
          }
    	</style>
    </head>
    <body>
      <ul id="navigation">
        <li><a href="index.html">Home</a></li>
         <li><a href="products.html">Products</a></li>
         <li><a href="about.html">About Us</a></li>
         <li><a href="testimonials.html">Testimonials</a></li>
         <li><a href="links.html">Retail Locations</a></li>
      </ul><!--  end navigation -->
   <br />
      
    <div align="center">
      <p><span class="header1">Ingredients (more descriptions to come)</span></p>
      
    </div>
<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 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 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 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 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>


    </body>
</html>

Open in new window

0
Comment
Question by:emilysbca
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
10 Comments
 
LVL 18

Expert Comment

by:Rartemass
ID: 36596859
The issue is that you have specified a height of 100%.
You will need to reduce that quite a bit.
I've done some basic testing and instead of having a height of 100% change it to 7em (eg height: 7em;)
The spacing looks fine there.
If you still want to use a percentage, I'd suggest 12%.
0
 

Author Comment

by:emilysbca
ID: 36713397
Nope, it wasn't that.  I ended up putting a container div around each entry, so the height 100% fills that instead of the whole page.  I put different colored borders around each portion so I could better see what was happening, and the images were what was pushing each next entry in.  
<!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 id="banner1">
      <ul id="navigation">
        <li><a href="index.html">Home</a></li>
         <li><a href="products.html">Products</a></li>
         <li><a href="about.html">About Us</a></li>
         <li><a href="testimonials.html">Testimonials</a></li>
         <li><a href="links.html">Retail Locations</a></li>
      </ul><!--  end navigation -->
   </div><!-- end header -->
   <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 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 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 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 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
 

Author Comment

by:emilysbca
ID: 36714090
I've requested that this question be closed as follows:

Accepted answer: 0 points for emilysbca's comment http:/Q_27327032.html#36713397
Assisted answer: 100 points for Rartemass's comment http:/Q_27327032.html#36596859

for the following reason:

I'm sure it could be done more efficiently but it works for me at my level off CSS.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:emilysbca
ID: 36713425
meaning I'm sure MY solution could be done more efficiently :-)
0
 
LVL 18

Expert Comment

by:Rartemass
ID: 36713947
Just checking, did you change the height on ingredient-image AND ingredient-text?
On my system doing that worked fine.

Adding a div container around each ingredient set is one way to go about it to ensure they never tamper with another ingredient. It may be useful if you want to re-design the site layout later.
It does however add another layer of complexity to the site.

I also noticed that for Epsom Salts, the last line drops below the image and aligns to the right.
To fix this, remove the second <p> tag and instead add a <br />.
I've made the update below (this is on your second code with the container divs and borders).
 
<!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 id="banner1">
      <ul id="navigation">
        <li><a href="index.html">Home</a></li>
         <li><a href="products.html">Products</a></li>
         <li><a href="about.html">About Us</a></li>
         <li><a href="testimonials.html">Testimonials</a></li>
         <li><a href="links.html">Retail Locations</a></li>
      </ul><!--  end navigation -->
   </div><!-- end header -->
   <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.<br />

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 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 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 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 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


This is the modified code from the first one with the size changes I suggested instead of the divs. I've added borders so you can see the regions for the image (dotted green) and the text (solid red).
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
	<head>
	<title></title>

    	<style type="text/css">
    	  .ingredient-image{
    	    float: left;
    	    height: 7em;
            padding: 0px 10px 0px 0px;
		   border-style: dotted;            
           border-width: 4px;
           border-color: green;
    	  }
		  .ingredient-text{
            height: 7em;
		   border-style: solid;            
           border-width: 4px;
           border-color: red;
          }
    	</style>
    </head>
    <body>
      <ul id="navigation">
        <li><a href="index.html">Home</a></li>
         <li><a href="products.html">Products</a></li>
         <li><a href="about.html">About Us</a></li>
         <li><a href="testimonials.html">Testimonials</a></li>
         <li><a href="links.html">Retail Locations</a></li>
      </ul><!--  end navigation -->
   <br />
      
    <div align="center">
      <p><span class="header1">Ingredients (more descriptions to come)</span></p>
      
    </div>
<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 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 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 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 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.<br />

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>


    </body>
</html>

Open in new window

0
 
LVL 18

Expert Comment

by:Rartemass
ID: 36714091
The request to close was made without allowing time for me to respond to emilysbca's additional comment. I have done so now, only a couple hours after the author's comment was made. I feel this question is still ongoing and would prefer feedback from the question's author regarding my new comments. Once that has been done and no further questions or issues arise, I'm happy for the closure to be addressed.
0
 

Accepted Solution

by:
emilysbca earned 0 total points
ID: 36914059
Hi Rartemass, I feel that adding in extra breaks was not the solution I was looking for.  I want to be able to type in text of any length and have it just line up without needing to add a fix like that.  Another post about this issue solved the problem by adding these attributes to the container div:

The container needed to be this:

 .container {
               clear:both;
               overflow:hidden;
             
}

To me this is a better solution because I don't have to edit each post based on how many letters are in it.
0
 
LVL 18

Expert Comment

by:Rartemass
ID: 36914224
That would work better. I just saw a simple problem and fixed simply in isolation.
Just checking, is everything working OK now?
0
 

Author Comment

by:emilysbca
ID: 36921579
Yes, when I added the code above it all fell into place.
0
 

Author Closing Comment

by:emilysbca
ID: 36941309
The solution actually came from another post on this same subject.  It works without needing to do any editing to the text that is entered.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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…
Suggested Courses

650 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