Using align-left to have text around image, but new line keeps floating text

[Etaria]

Hello all and thank you in advance for the help.

I would like to have a vertical column of images, each with a caption of text beside them. I am using a <p> style I defined in the css. However, when in Firefox, the second image is directly below the first, touching even, and the text for the new image continues on below the text of the first image. What am I doing wrong? I have tried <br> and other things but hmm.. I think someone glued them together while I wasn't looking!

My site is as follows: http://www.crochetgarden.com/t/crochetpatterns.html
My CSS page is here: http://www.crochetgarden.com/t/main.css

My code is as follows:

	<div id="content">
		<h2>Patterns At The Crochet Garden</h2>
		<p class="widetext" ><img src="images/tinyblossoms.jpg" alt="Preemie Patterns" align="left" hspace=15><a href="http://tinyblossoms.crochetgarden.com/"><strong>Tiny Blossoms</strong></a><br>Free crochet patterns for our tiny lambs making an early arrival into this world. Over time patterns will be added and will always be free.</p>
		<p class="widetext" > <img src="images/babies.jpg" alt="Baby and toddler crochet patterns" align="left" hspace=15><a href="babies.html"><strong>Baby Blooms</strong></a><br>This place in the garden has patterns for babies and toddlers. The average sizing is 0-3 mos - to a toddler size 4, but can include size newborn up to size 5. Be sure to check out the latest addition - <i>"Nordic River Hoodie"</i></p>
		<p class="widetext" > <img src="images/children.jpg" alt="Crochet patterns for children" align="left" hspace=15><a href="children.html"><strong>Dancing Monarchs</strong></a><br>This place in the garden has patterns for children from size 5 up to size 10. </p>
		<p class="widetext" > <img src="images/men.jpg" alt="Baby and toddler crochet patterns" align="left" hspace=15><a href="men.html"><strong>Dragonfly's Place</strong></a><br>The little nook in the garden especially for him. Be sure to take a look at the <i>Rugged Mountain Collection</i>, our most popular pattern collection for men!</p>
		<p class="widetext" > <img src="images/ladies.jpg" alt="Crochet patterns for ladies" align="left" hspace=15><a href="women.html"><strong>Patined Ladies</strong></a><br>testing</p>
		<p class="widetext" > <img src="images/afghans.jpg" alt="Crochet patterns for ladies" align="left" hspace=15><a href="afghans.html"><strong>Lily Pond</strong></a><br>testing</p>
		<p class="widetext" > <img src="images/free.jpg" alt="Free crochet patterns" align="left" hspace=15><a href="freepatterns.html"><strong>Rain Garden</strong></a><br>testing</p>
	</div>

[Kravvitz]

It's because you're using the align property. align="left" is treated like CSS's float:left;. IE doesn't handle floats entirely correctly. You should avoid using the align and hspace properties -- use CSS instead.

You need to add clear:left; or clear:both; to those <p>s, but because of how clear works, you'll need to make some other changes as well. I might float the <p>s left and give #content overflow:auto;.


You should use a Strict doctype.
No more Transitional DOCTYPEs, please
It's Time To Kill Off Transitional DOCTYPES
Transitional vs. Strict Markup

Please make sure that your (X)HTML and CSS are valid.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

[Etaria]

Thank you for the info! I changed it to strict, and I got it validated. I took out the table properties and made CSS format them (Was so proud of finally figuring out how to do that).. I also did other formatting in css to make it validate.
still working on getting the text to work to fall beside the photos.

[Kravvitz]

You're welcome I'm glad to see you've made improvements.

I suggest you learn how semantics apply to X/HTML. Semantics is really a very important subject when it comes to X/HTML.

[Etaria]

Edit: I thought this was working but it isn't, so now experimenting, so ignore this post... going to keep plougging away at this.

Referece:
http://www.crochetgarden.com/t/crochetpatterns.html
http://www.crochetgarden.com/t/main.css

OK! I think I have figured it out. By the way... CSS validating is a pain >< I did get rid of the dew CSS errors, but getting rid of the warnings aish... it wants colors for everything. I did find online where one could put in:

background-color: inherit;

Where one does not want a color and it will take care of the warning.. So the css code I have now has warnings- all pretty much this color thing, but no errors, and the html page itself validates to strict.

I think also I have figured out how to code the text along side the images. Is this correct? It looks good in both IE6 and Firefox, except the bottom of the page swallows the last button.

What I did was made a class in the css as follows: (I made the width the same width in ps as the images)
img.floatright

{
float: right;
width: 278px;
margin: 0,0,.5em, .5em;
padding: 0;
border: 1px solid #666;
clear: right;
font-style: italic;
	font-size: 100%;
	font-family: Georgia, arial, helvetica, sans-serif;
	color: #44311C;
}

I then codes it as follows:

 <img src="images/tinyblossoms.jpg" alt="Preemie Patterns" class="floatright"><p class="patterns"><strong>Tiny Blossoms</strong></a><br> Free crochet patterns for our tiny lambs making an early arrival into this world. Over time patterns will be added and will always be free.</p>
 <img src="images/babies.jpg" alt="Baby and toddler crochet patterns" class="floatright"><p class="patterns"><strong>Baby Blooms</strong></a><br> This place in the garden has patterns for babies and toddlers. The average sizing is 0-3 mos - to a toddler size 4, but can include size newborn up to size 5. Be sure to check out the latest addition - <i>"Nordic River Hoodie"</i></p>
 <img src="images/children.jpg" alt="Patterns for ages 4-10" class="floatright"><p class="patterns"><strong>Dancing Monarchs</strong></a><br> This place in the garden has patterns for children from size 5 up to size 10.</p>
 <img src="images/men.jpg" alt="Crochet patterns for men" class="floatright"><p class="patterns"><strong>Dragonfly's Place</strong></a><br>The little nook in the garden especially for him. Be sure to take a look at the <i>Rugged Mountain Collection</i>, our most popular pattern collection for men!</p>
 <img src="images/ladies.jpg" alt="Crochet patterns for ladies" class="floatright"><p class="patterns"><strong>Painted Ladies</strong></a><br> test</p>
 <img src="images/afghans.jpg" alt="Crochet afghan patterns" class="floatright"><p class="patterns"><strong>Rain Garden</strong></a><br>test</p>

[Etaria]

Ok... I cannot figure out how to code it so that I have a column of images with text beside each, so that they line up with each..

would it be so bad to use a table to do this? I know I could do it with a table easily.. but I no that tables are taboo and have their specific place in coding..

Going to maybe try a few more things .. I have learned so much this past week, but still feel like I know nothing ><

[Kravvitz]

Why did you move the <img>s outside of the <p>s?

You should use a list (<ul>) to mark that up. (To know why, follow the link I posted about semantics.)

These three articles explain how to style lists.
http://www.alistapart.com/articles/taminglists/
http://css.maxdesign.com.au/listutorial/
http://www.webreference.com/programming/css_lists/

And this one explains a fix for a common IE bug:
White space bug revisited--the definitive fix

[Etaria]

I was playing around trial by error.. Thank you for the good read.. another place to bookmark!

I think I now have it... I decided after all that work I didn't like having them all in a column, so I made it so there would be 2 images side by side with the text below...

I then began having issues with the floats and my container background color going away and then I read the article on floats and incorporated .clearer and voila!!!

Oh I am doing a little happy dance

So much to learn but I am happy now with the layout of the images with the text and it all validates, and I checked in both firefox and IE and they both look good!!

http://www.crochetgarden.com/t/crochetpatterns.html

Now, onto more coding and learning and absorbing... I hope... lol

[Kravvitz]

Why are you still using <div>s instead of a list? (Read up on semantics.)

The validators still show errors.
http://validator.w3.org/check?verbos...tpatterns.html
http://jigsaw.w3.org/css-validator/v...tpatterns.html

[Etaria]

Ok I read lots on semantics.. and after a lot of trial and error and reading... I went to a lot of the links.. learned quite a bite. Do not know how much I will retain, but at least I have a small foundation of an introduction.

I made the page with a list- and it does indeed validate..

Can't believe I figured this out.. took lots of reading.. still a bit shaky.. but I think I did it right and it looks good in both browsers...

I did learn a LOT about lists by doing this..

You can see page here:
http://www.crochetgarden.com/t/crochetpatterns.html
http://www.crochetgarden.com/t/main.css

I am now taking a break- I think it has been lol 12 hours off and on of working on this...! but, I think i got this page right now.. finally..

[Kravvitz]

Better, though all of the "phototitle" paragraphs should be in one list, not one list for each row.

Take a look at this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
ul.example {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.example li:before {
  content: ".";
  display: block;
  clear: right;
  height: 0;
  visibility: hidden;
}
ul.example li.alt:before {
  display: none;
  clear: none;
}

ul.example li {
  width: 48%;
  border: 2px solid #000;
  clear: right;
  float: right;
  background-color: #00c;
  min-height: 5em;
  height: 5em;
}
ul.example li.alt {
  background-color: #c00;
  float: none;
  clear: none;
  min-height: 3em;
  height: 3em;
  margin: 0 0 3em;
}

* html ul.example li {
  height: 5em;
  /* for IE5/Mac only \*//*/ display:inline-block; /* */
}
* html ul.example li.alt {
  height: 3em;
  width: 96%; /* for some reason in IE5.x/Win the width is half what it should be */
  wid\th: 48%;
}
</style>
</head>
<body>

<p>This seems to display the same in IE5+/Win, Firefox, Netscape 6+, Opera 7.2+,
Safari, IE5/Mac, Konqueror 3, and iCab 3.</p>

<ul class="example">
  <li>right</li>
  <li class="alt">left</li>
  <li>right</li>
  <li class="alt">left</li>
  <li>right</li>
  <li class="alt">left</li>
</ul>

</body>
</html>

[Etaria]

I had a super hard time trying to figure out how to do like you said, put everything into 1 lists...

My idea, was to have the list and on the first line have 2 images side by side, and on the second line, have 2 captions (one for each image above)..

Every way I tried it it wouldn't work. I also did look through that listorial site you shows of all the different types of lists but could find none similar.. so hah! I thought of the idea of using the technique used to make a navigational menu and thus just make several <ul> and voila- hehe my backwards thinking worked.

What you have coded above looks complicated. I will definitely have to spend some time studying that. I do not know why all of this is so difficult for me to grasp.

[Kravvitz]

Originally Posted by Etaria

I thought of the idea of using the technique used to make a navigational menu and thus just make several <ul> and voila- hehe my backwards thinking worked.

Where did you see that? Unless the nests were listed, the code was semantically incorrect.

Originally Posted by Etaria

What you have coded above looks complicated. I will definitely have to spend some time studying that. I do not know why all of this is so difficult for me to grasp.

I used a slightly modified version the non-IE part of the "easy clearing" hack a few hacks to fix IE5.x bugs.

It seems you don't need anything that complicated though.

[Etaria]

May I PM you with a question Kravvitz? I am not sure on the etiquette of PMing here, so I figure I would ask first

[Kravvitz]

*chuckles* Sure, you can PM me.