Solved

CSS

Posted on 2011-09-25
10
229 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
  • 6
  • 4
10 Comments
 
LVL 18

Expert Comment

by:Rartemass
Comment Utility
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
Comment Utility
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
Comment Utility
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
 

Author Comment

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

Expert Comment

by:Rartemass
Comment Utility
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 18

Expert Comment

by:Rartemass
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Yes, when I added the code above it all fell into place.
0
 

Author Closing Comment

by:emilysbca
Comment Utility
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

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
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…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

772 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

15 Experts available now in Live!

Get 1:1 Help Now