Lining Up Images, Captions And Paragraphs Using Divs

[NikMac]

It seems like solving one problem leads to another...I'm trying to create a page like this:HeadingParagraph - image on right with captionParagraph - image on right with captionHeadingParagraph - image on right with captionetc.This is the code I have:HTML:

<div id="main" <h2><a name="title">title</a></h2>				<div class="diagram">					<img class="floatright" src="../../images/diagrams/diagram1.png" alt="alt">					<div class="caption">caption <br />more of caption...</div>				</div>			<p>text (to left of image) here. This appears to work correctly.</p>							<div class="diagram clearright">					<img class="floatright" src="../../images/diagrams/diagram2" alt="alt">					<div class="caption">caption</div>			</div><p>text that wants to position itself in the wrong place and give me a big headache here.</p></div>

and relevant CSS:

.clear {clear:both;padding:0;margin:0;line-height:0;}.clearleft {clear:left}.clearright {clear:right;}.floatleft {float:left;}.floatright {float:right;}#main p { text-align: justify; font-size:1.2em; margin: 7px 0 7px 0; padding: 0; background: inherit }#main img { margin: 0px 10px 3px 10px; position: relative; border: 1px solid  #f5f5f5; padding: 1px; background: #FFF }#main .diagram {margin: 0 0 10px 0; float:right; position: relative;}#main h2 { color: #999; width: 100%; border-bottom: 1px solid #BBB;clear:both; padding: 0; background: inherit;}#main h2 a {text-decoration: none !important}

Currently, the second <p> text is positioned left of the first diagram. I want it to be left of the second diagram, which is positioned underneath the first diagram and paragraph. I've tried adding a clear:right or clear:both to the paragraph, but this just makes it go underneath the second diagram. How can I make this all lineup?I can only think that I need to make a new "div" class or id for every paragraph or throw in a lot of linebreaks inbetween the diagrams and paragraphs, although that seems a bit tedious and has some standards problems, I think?Is there an easier way to do this? Something I'm missing?Thanks.

[thescientist]

I think a simple way to approach is as if it was a typical two column layout with a clearing footer. The left div is similar to a nav vertical nav bar except with just text, and then the content div is just an image with a wide left margin, and the clearing footer is just like your caption. Heading would be like a little banner. Basically you would just make a class for each of the divs you need, the "banner" (heading), the "nav" (paragraph) div, the "content" (the image) div, and the "footer" (the caption). Keeps it neat and simple. That way you can make one and repeat as necessary.

[NikMac]

Would you mind showing the basic code of the structure you suggested? I still find it quite confusing. I've found that if I put the opening <p> tag before the <div tag> (so that it is like <p><div class="diagram">...</div></p>") it appears correct, except that I loose the formatting of the paragraph text, and I don't think I should be putting a <div> inside a paragraph tag either.

[thescientist]

try looking up two column layouts css (google). Look for ones with footers that clear.

[NikMac]

I've spent the last hour trying this with no avail. Can you tell me what I'm doing wrong?I've created three classes:

.description {float: left; width:600px}.diagram {margin: 0 0 10px 600px; width:120px}.caption {text-align: center; font-size: 10px; line-height:5px; vertical-align: top;}

and my HTML is like this:

<div class="description"><p>text here</P></div><div class="diagram"><img src="..."><div class="caption">caption here</div></div>

The diagram and caption seem to work correctly. But every paragraph is positioned underneath the image it should be beside, and it doesn't wrap around the image. I'm going to take a much-needed break now, but I'll be back later tonight. Thanks.

[Synook]

Are you thinking of something like:

.description {float: left; width:600px}.caption {margin-left:600px; width:120px}

[NikMac]

Are you thinking of something like:

.description {float: left; width:600px}.caption {margin-left:600px; width:120px}

Is that a suggestion or a question? I tried changing the code to that (adding "margin-left:600px; width:120px" to the .caption class) and it did not appear to change much.For clarity..The portion of the page I'm trying to work with is 720px wide.Here is roughly what I want:headerdescription, wrapped around image and caption.... | image with caption----------------------------another description, below first image, next to 2nd | second image with caption----------------------------etc. - hope that makes sense.For another example, I just noticed that w3schools has a similar layout: http://www.w3schools.com/html/html_intro.asp-"What is HTML?" is the header-"HTML is a language for describing web pages...." is the description-In my case, there would be an image with caption to the right. The top of the image would be parallel with the "HTML is a language for describing web pages." line of text (preferably this text would wrap around the image). Then there would be a number of paragraphs and images in a similar format below this.I never imagined this would be so difficult... thanks for all the suggestions. How can I make this work?

[Synook]

Oh, you mean like http://lab.aspektas.com/captions.html?

[NikMac]

Yes! That's pretty much what I was trying to do. (Of course it will be on a more complete page with navagation, styling, etc....).I assume it can be done without the horizontal rule in between the sections, and have more than one "header" after a few sections. Anyways, I'll take a look at the source code there and post here if I have any more problems.Thanks for all the help, everyone. Happy Holidays.Edit - one minor problem which keeps reoccuring: I can't format/style the text in the <p> tag. Changing the attributes in the .description class doesn't affect it.This seems to be related to having a <div> element inside a <p> tag - is this against any standards/could create more problems? Thanks..

[Synook]

Okay, the new version validates (apart from the obvious problem with the img tags) and doesn't have horizontal rules. You just need something to clear the floated image containers, in case they are taller than the text.

[NikMac]

Okay, the new version validates (apart from the obvious problem with the img tags) and doesn't have horizontal rules. You just need something to clear the floated image containers, in case they are taller than the text.

Excellent! Now I have it working perfectly. Thank you very much for all of your efforts. It's been a tremendous help to me.