DIVs as "building blocks"

[DoubleDee]

@noonnope

You’re confused about dl, dt and dd

You CAN have <h2> or <p> or <img> in a <dd>, which is the definition data, but not in <dt>, which is the definition term.

So is this okay…

<!-- NEW MARKUP STYLE -->
<dl>
	<dt>Apple's Lala purchase appears to have been "insurance"</dt>
	<dd>
		<img src="images/appleslala_133x75.jpg" alt="Pic of Apple's LaLa" width="133" height="75" />
		<span class="byline"><b>1 day ago - by Lisa Smith</b> | Posted in: Mac Central</span>
		<p>
		Apple has reportedly "clarified" its plans for the cloud to music
		industry execs, emphasizing that it doesn't want to undermine its
		dominance in the download market by rolling out yet another 
		streaming service. Instead, the company supposedly wants to offer 
		digital locker services for existing iTunes purchases.
		<p>
	</dd>
</dl>

If it is okay, then I think semantically it is much better than using DIVs and it also provides more order to my HTML, and I am all about order!

Debbie

[Rayzur]

@dresden_phoenix

you could also consider using a definition list ( if these aren’t the full fledged articles, but mere teasers to the story)

@DoubleDee

If it is okay, then I think semantically it is much better than using DIVs and it also provides more order to my HTML, and I am all about order!

I’ll go ahead and throw in my opinion of the “content” in question being used in a DL. I’m just not seeing any actual “definition term” or “definition description” in that content.

I’m seeing a heading with brief information following in a paragraph. Though it may validate, I don’t see a paragraph having any business being nested in a DD. Much less, nesting images and bylines above the <p> tag.

Now there may be times that you could justify nesting an image in a DD if that image actually gave a description of the Term. For example, if your DT was “Volcano” and there was an image of a Volcano in the DD. Though I would even be reluctant to do that since I really feel that a Text Description is what is intended.

Apple’s Lala purchase appears to have been “insurance”
That is not a DT, that is a Heading.
There is nothing to define about that, the sensible thing to do after using a Heading is provide information that relates to that heading. General information about a heading is not a “definition” of that heading.

First off let’s take a look at some examples of proper use of a DL straight from the horses mouth.

Definition lists: the DL, DT, and DD elements

All of their examples are containing Terms & Descriptions, when you have to try hard to justify using a DL for anything other than that it is a good indicator that you are headed in the wrong direction.

I would be going with something similar to what noonope posted above. I wouldn’t have my inline elements running loose beside the blocks either.

[DoubleDee]

@Rayzur

I’ll go ahead and throw in my opinion of the “content” in question being used in a DL. I’m just not seeing any actual “definition term” or “definition description” in that content.

I’m seeing a heading with brief information following in a paragraph. Though it may validate, I don’t see a paragraph having any business being nested in a DD. Much less, nesting images and bylines above the <p> tag.

Okay, fair enough.

I just thought it was better than using a DIV to order things - ehich Noonope seems particularly averse to!

So was my initial attempt where I wrapped everything in a <DIV class=“summary”> bad as well?

I wouldn’t have my inline elements running loose beside the blocks either.

Then how should my HTML/CSS look?

I DO want the layout/look to be consistent with the screen-shot I attached, but I am open to how the text and picture are marked up.

Debbie

[samanime]

Basically, here is how I break up my sites in a nutshell… hopefully it’ll provide some insight.

I usually divide my sites up into 3-4 main blocks (header, content, footer, and sometimes sidebar).

From there, I usually add in all the elements that make up each of those sections. Occasionally something will slip outside of those (for example, a site I recently did has an image banner between the header and content, so I pulled it out onto it’s own). However, most things stay in one of these homes.

After that, I usually go ahead and block out my site using the most semantically relevant combination of div, ul, ol, and dl that I can. After that point it’s usually time for me to start adding the actual elements.

If a div has quite a few inline elements, I’ll keep it wrapped in a div even if it doesn’t necessarily need it. I think this is what Rayzur was getting at. However, if I have just one or two elements inside a div, I’ll usually get rid of that div as it’s overkill.

Put simply… none of it is perfect. =p It’s always a balancing act between semantics, minimal code, organization and readability and the need for markup to style. There isn’t one person in the world that can create a “perfect” site which is 100% semantically correct and has just the right amount of code.

You’ll also change over time. If I look at HTML I wrote a year ago, it’s different from how I do things now (and I’m pretty experienced, so it’s not like I’ve gained vast amounts of new knowledge in that area).

A few warning signs to watch for will probably help you more:

• If you have one or two elements in a div, the div is probably unnecessary.
• If you have one div in one div, one is definitely unnecessary.
• If you have empty elements, there is probably a better way to do it.

And that’s about it… =)

[Rayzur]

@DoubleDee

Okay, fair enough.

So was my initial attempt where I wrapped everything in a <DIV class=“summary”> bad as well?

No, it wasn’t bad. That was an appropriate example of using a div. It is better to do that than to abuse a DL which has a specific semantic meaning.

Then how should my HTML/CSS look?

I DO want the layout/look to be consistent with the screen-shot I attached, but I am open to how the text and picture are marked up.
Well as far as the html goes I would build on what you had started with by nesting the image in a <p> for the sake of getting it in a block box. There are some that will argue about that but I fall into the “A Picture is Worth a 1000 Words” crowd.

As far as the byline, that would almost qualify as a <cite> as it “contains a reference to other sources”. But that leaves us in the same spot though since it is an inline element. If you were to use it you would need to nest it in a <p> as well.

Something like this would be perfectly acceptable:

The wrapping div just gives us separation from the others, it allows you to target child styles. Your going to have a floated image (or floated <p>) so you can force that div to contain it’s floated children which will be beneficial too.

<div class="recent-news">
    <h2>Apple's Lala purchase appears to have been "insurance"</h2>
    <p class="news-img"><img src="http://www.sitepoint.com/forums/images/appleslala_133x75.jpg" alt="Pic of Apple's LaLa" width="133" height="75" /></p>
    <p class="byline"><b>1 day ago - by Lisa Smith</b> | Posted in: Mac Central</p>
    <p>Apple has reportedly "clarified" its plans for the cloud to music industry execs, emphasizing that it doesn't 
    want to undermine its dominance in the download market by rolling out yet another streaming service. Instead, the 
    company supposedly wants to offer digital locker services for existing iTunes purchases.</p>
</div>

Now if you wanted to eliminate (or substitute) those <p> tags being used for the image and byline you could get away with using list-items. In that case I would consider everything that follows the h2 to be a “list of details”.

The LI gives us a block level container right off the bat and that would take care of the image and byline. It would be optional from there as to whether or not you nested a <p> tag into the last LI. If there is more than one sentence then it is technically a paragraph.

<div class="recent-news">
    <h2>Apple's Lala purchase appears to have been "insurance"</h2>
    <ul>
        <li class="news-img"><img src="http://www.sitepoint.com/forums/images/appleslala_133x75.jpg" alt="Pic of Apple's LaLa" width="133" height="75" /></li>
        <li class="byline"><b>1 day ago - by Lisa Smith</b> | Posted in: Mac Central</li>
        <li><p>Apple has reportedly "clarified" its plans for the cloud to music industry execs, emphasizing that it doesn't 
        want to undermine its dominance in the download market by rolling out yet another streaming service. Instead, the 
        company supposedly wants to offer digital locker services for existing iTunes purchases.</p></li>
    </ul>
</div>

The second example costs us a few more elements but it should quite down the “P-tag Abuse” crowd. But then they will start crying List Abuse. Bottom line though, the UL is a generic List of items that would be better used here than a DL.

[DoubleDee]

Thanks for the tips, samanime!

Debbie

[DoubleDee]

@Rayzur

No, it wasn’t bad. That was an appropriate example of using a div. It is better to do that than to abuse a DL which has a specific semantic meaning.

Okay, good.

Well as far as the html goes I would build on what you had started with by nesting the image in a <p> for the sake of getting it in a block box.

Okay.

As far as the byline, that would almost qualify as a <cite> as it “contains a reference to other sources”. But that leaves us in the same spot though since it is an inline element. If you were to use it you would need to nest it in a <p> as well.

If it had a class associated with it…

<span class="byline">

couldn’t you add a style to the <span> to make it a block?

For example…

.byline{
	display: block;
}

The wrapping div just gives us separation from the others, it allows you to target child styles. Your going to have a floated image (or floated <p>) so you can force that div to contain it’s floated children which will be beneficial too.

So would you just one one DIV for all of the Article Summaries, or could I use one to wrap a given “Article Summary” and then again for the “set of Article Summaries”?

I understand the approach you used - and don’t have any problems making the needed changes - but it creates some problems…

By wrapping the Image, Byline, and Summary in their own <P> tags, each is on a separate line.

The look I want - see attachment earlier - is the “Heading” left align, Picture on separate line, and to the right is the Byline on its own line, and then the Summary below the Byline on its own line and it should wrap.

Ideally, if the Summary text wraps around and is taller than the picture, I think it would look better if it stayed to the right of where the Picture would be if it extended down farther. (This kind of layout is why people “sinned” with HTML Tables for so many years!!!)

I chose Float: Left because this seemed to address this issue, although I had an issue with my own approach which was that the next “Article Summary” block was creeping up into the previous Picture. (Must have been a “clearing” issue?)

The attachment is best to go off of, but textually speaking, something like this…

<<NEWS ARTICLE HEADING GOES HERE>>
XXXXXXXXXXX	<<BYLINE HERE>>
X PICTURE X	<<SUMMARY GOES HERE AND WRAPS>>
X   GOES  X	<<AND WRAPS AND WRAPS AND WRAPS>>
X   HERE  X	<<AND WRAPS AND WRAPS AND WRAPS>>
XXXXXXXXXXX	<<AND WRAPS AND WRAPS AND WRAPS>>
		<<AND WRAPS AND WRAPS AND WRAPS>>
		<<AND WRAPS AND WRAPS AND WRAPS>>
		<<AND WRAPS AND WRAPS AND WRAPS>>
		<<AND WRAPS AND WRAPS AND WRAPS>>
		<<AND WRAPS AND WRAPS AND WRAPS>>

Thanks,

Debbie

[Rayzur]

If it had a class associated with it…

Forget about using that cite tag, it really should only be used along with a blockquote. I only mentioned it because your byline was referring to another source.

Moving on…

couldn’t you add a style to the <span> to make it a block?

Yes you can but it is still technically an inline element.

Have a read through these threads for reasons why it is bad practice to let your inlines run loose with your blocks.
[URL=“http://www.sitepoint.com/forums/html-xhtml-52/images-p-tags-662256.html”]
images in p tags?
[URL=“http://www.sitepoint.com/forums/html-xhtml-52/enclosing-img-p-643675.html”]
Enclosing <img> in <p>?

So would you just one one DIV for all of the Article Summaries, or could I use one to wrap a given “Article Summary” and then again for the “set of Article Summaries”?

Yes each article summary would be wrapped in it’s own div and that would be a class so you could style it once and use it repeatedly.

Now if you need to nest all of those divs in a parent div you can, that depends on the rest of your page.

I understand the approach you used - and don’t have any problems making the needed changes - but it creates some problems…

By wrapping the Image, Byline, and Summary in their own <P> tags, each is on a separate line.

Right, I saw the image you posted and the examples I gave could have been styled accordingly.

That’s why I left the classes on the img and byline <p> classes. So you could style them separately, the img <p> would be floated left. As long as it is first in the source the other blocks will rise up beside it.

[DoubleDee]

Rayzur,

I’m reading your last response now, but here is what I’ve got so far…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Sample Article Highlights</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
/*				outline: 1px dotted #F00;		/* */
			}

			.summary{
				margin: 2em;
				padding: 0;
			}

			h2{
				margin: 3em 0 0.5em 0;
				font: bold 1.2em/1.2 arial;
				clear: both;
			}

			.byline{
				font: 0.7em arial;
			}

			p{
				margin: 0.2em 0;
				font: 0.8em/1.3 arial;
			}

			img{
				float: left;
				margin: 0 1em 0 0;
				outline: 1px dotted #F00;		/* */
			}
		</style>
	</head>
	<body>
		<div class="summary">
			<!-- Summary 1 -->
			<h2>For animals, the bigger the group, the more distinct its members</h2>
			<img src="images/prairiedogs_133x75.jpg" alt="Pic of Prairie Dogs" width="133" height="75" />
			<p><span class="byline"><b>2 days ago - by Kate Shaw</b> | Posted in: Nobel Intent</span></p>
			<p>
				Individuality increases with group size in rodents, making it
				easier to recognize group members among lots of potential targets.
			</p>

			<!-- Summary 2 -->
			<h2>Apple's Lala purchase appears to have been "insurance"</h2>
			<img src="images/appleslala_133x75.jpg" alt="Pic of Apple's LaLa" width="133" height="75" />
			<p><span class="byline"><b>1 day ago - by Lisa Smith</b> | Posted in: Mac Central</span></p>
			<p>
				Apple has reportedly "clarified" its plans for the cloud to music
				industry execs, emphasizing that it doesn't want to undermine its
				dominance in the download market by rolling out yet another streaming
				service. Instead, the company supposedly wants to offer digital locker
				services for existing iTunes purchases.
			</p>

			<!-- Summary 3 -->
			<h2>Windows Phone 7 update put on hold for Samsung handsets</h2>
			<span class="byline"><b>5 days ago - by Chris Tolman</b> | Posted in: Windows Central</span>
			<p>
				The problem Windows Phone 7 patch has had its distribution to
				Samsung handsets halted, amidst reports of failed updates and
				bricked phones.
			</p>

			<!-- Summary 4 -->
			<h2>Metered billing on ice in Canada as Bell admits it can't count bits</h2>
			<img src="images/meteredbilling_133x75.jpg" alt="Pic of Icycles" width="133" height="75" />
			<span class="byline"><b>14 days ago - by Rachel Wilson</b> | Posted in: ISPs</span>
			<p>
				Canada's telecom regulator has launched a new proceeding to reconsider
				its decision to allow usage based billing (UBB) throughout the land.
				That decision is now suspended in the wake of public furor over the
				call, which would have allowed Bell Canada to bill smaller competitive
				ISPs by data use rather than hitting them with a fixed monthly fee.

				"The great concern expressed by Canadians over this issue is telling
				of how much the Internet has become an integral part of their lives,"
				declared Konrad von Finckenstein, chair of the Canadian Radio-Television
				and Telecommunications Commission.
			</p>
		</div>
	</body>
</html>

It looks pretty good, but there is still an issue with how the Header acts after the previous Image. (I know what I am doing isn’t 100% right, because I am relying on a top margin of 3em to achieve spacing, but when there isn’t a picture it looks weird.)

Logically what I need is this…

“If the Image is the lowest item, then create a 2em margin between it and the next Header, else if the Paragraph is the lowest item, then create a 2em margin between it and the next Header.”

Sincerely,

Debbie

[DoubleDee]

Hey all you “DIV haters”…

The problem I am having above demonstrates a logical time to break things up with a DIV. :idea:

If I have a DIV wrap around each “Article Summary”, then I could base my top-margin for the proceeding Header off it and it wouldn’t matter whether the Image or the Paragraph was taller!

However maybe there is a cleaner way to do things without those extra DIVs?

Debbie

[Rayzur]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Article Summaries</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
}
#wrap {
    width:780px;
    margin:0 auto;
    padding:1px 0;/*un-collapse child margins*/
    background:#CDF;
}
h1 {
    font-size:1.5em;
    margin:0;
    text-align:center;
}
.summary {
    width:720px;/*haslayout IE6*/
    overflow:hidden;/*contain floats*/
    margin:20px auto;
    padding:10px;
    background:#FFF;
}
.summary h2 {
    font-size:1.2em;
    margin:0;
}
.summary p {
    overflow:hidden;/*stop text from wrapping under float*/
    margin:.75em 0 0;
}
p.image {
    float:left;
    margin:.75em .75em 0 0;
}
p.image img {
    display:inline-block;
    vertical-align:bottom;
    background:lime;
}
p.byline {
    font-size:80%;
}
</style>

</head>
<body>

<div id="wrap">
    <h1>Article Summaries</h1>
    <div class="summary">
        <h2>Apple's Lala purchase appears to have been "insurance"</h2>
        <p class="image"><img src="http://www.sitepoint.com/forums/images/appleslala_133x75.jpg" alt="Pic of Apple's LaLa" width="133" height="75"></p>
        <p class="byline"><b>1 day ago - by Lisa Smith</b> | Posted in: Mac Central</p>
        <p>Apple has reportedly "clarified" its plans for the cloud to music industry execs, emphasizing that it doesn't 
        want to undermine its dominance in the download market by rolling out yet another streaming service. Instead, the 
        company supposedly wants to offer digital locker services for existing iTunes purchases.</p>
    </div>    
    <div class="summary">
        <h2>Apple's Lala purchase appears to have been "insurance"</h2>
        <p class="image"><img src="http://www.sitepoint.com/forums/images/appleslala_133x75.jpg" alt="Pic of Apple's LaLa" width="133" height="75"></p>
        <p class="byline"><b>1 day ago - by Lisa Smith</b> | Posted in: Mac Central</p>
        <p>Apple has reportedly "clarified" its plans for the cloud to music industry execs, emphasizing that it doesn't 
        want to undermine its dominance in the download market by rolling out yet another streaming service. Instead, the 
        company supposedly wants to offer digital locker services for existing iTunes purchases.</p>
    </div>
    <div class="summary">
        <h2>Apple's Lala purchase appears to have been "insurance"</h2>
        <p class="image"><img src="http://www.sitepoint.com/forums/images/appleslala_133x75.jpg" alt="Pic of Apple's LaLa" width="133" height="75"></p>
        <p class="byline"><b>1 day ago - by Lisa Smith</b> | Posted in: Mac Central</p>
        <p>Apple has reportedly "clarified" its plans for the cloud to music industry execs, emphasizing that it doesn't 
        want to undermine its dominance in the download market by rolling out yet another streaming service. Instead, the 
        company supposedly wants to offer digital locker services for existing iTunes purchases.</p>
    </div>
</div>

</body>
</html>

[system]

@DoubleDee

I just thought it was better than using a DIV to order things - ehich Noonope seems particularly averse to!

@DoubleDee

Hey all you “DIV haters”…

The problem I am having above demonstrates a logical time to break things up with a DIV. :idea:

Hey Debbie, you should really cool down. You seem to be having a bit of an attitude these days, and I don’t really care for that. If you are set on doing things YOUR way, there’s no need to be rude with those trying to offer THEIR insight, OK?

It’s not me being anal, it’s you mixing up div with semantics, dt with dd, OK?

[DoubleDee]

Rayzur,

Thanks for the code! I’m off to bed - feeling clobbered again thanks to CSS! Will look at your code in the a.m.

(Hey!! What’s up with that “Fixed” format stuff?! All the cool people are going “Elastic” and “Fluid” my man!! Dontcha know?!)

Here is my best attempt at things…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Sample Article Highlights</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}

			.summary{
				margin: 0 0 0 0;
				padding: 0;
/*				outline: 1px dotted #F00;		/* */
			}

			h2{
				margin: 0 0 0.5em 0;
				font: bold 1.2em/1.2 arial;
				clear: both;
			}

			p{
				margin: 0 0 2em 0;
				font: 0.8em/1.3 arial;
			}

			.byline{
				margin: 0 0 0 0;
				font: 0.7em arial;
			}



			img{
				float: left;
				margin: 0 1em 1em 0;
				outline: 1px dotted #F00;		/* */
			}
		</style>
	</head>
	<body>
		<div class="summary">
			<!-- Summary 1 -->
			<h2>For animals, the bigger the group, the more distinct its members</h2>
			<img src="images/prairiedogs_133x75.jpg" alt="Pic of Prairie Dogs" width="133" height="75" />
			<span class="byline"><b>2 days ago - by Kate Shaw</b> | Posted in: Nobel Intent</span>
			<p>
				Individuality increases with group size in rodents, making it
				easier to recognize group members among lots of potential targets.
			</p>
		</div>

		<div class="summary">
			<!-- Summary 2 -->
			<h2>Windows Phone 7 update put on hold for Samsung handsets</h2>
			<span class="byline"><b>5 days ago - by Chris Tolman</b> | Posted in: Windows Central</span>
			<p>
				The problem Windows Phone 7 patch has had its distribution to
				Samsung handsets halted, amidst reports of failed updates and
				bricked phones.
			</p>
		</div>

		<div class="summary">
			<!-- Summary 3 -->
			<h2>Metered billing on ice in Canada as Bell admits it can't count bits</h2>
			<img src="images/meteredbilling_133x75.jpg" alt="Pic of Icycles" width="133" height="75" />
			<span class="byline"><b>14 days ago - by Rachel Wilson</b> | Posted in: ISPs</span>
			<p>
				Canada's telecom regulator has launched a new proceeding to reconsider
				its decision to allow usage based billing (UBB) throughout the land.
				That decision is now suspended in the wake of public furor over the
				call, which would have allowed Bell Canada to bill smaller competitive
				ISPs by data use rather than hitting them with a fixed monthly fee.

				"The great concern expressed by Canadians over this issue is telling
				of how much the Internet has become an integral part of their lives,"
				declared Konrad von Finckenstein, chair of the Canadian Radio-Television
				and Telecommunications Commission.
			</p>
		</div>

		<div class="summary">
			<!-- Summary 4 -->
			<h2>Apple's Lala purchase appears to have been "insurance"</h2>
			<img src="images/appleslala_133x75.jpg" alt="Pic of Apple's LaLa" width="133" height="75" />
			<span class="byline"><b>1 day ago - by Lisa Smith</b> | Posted in: Mac Central</span>
			<p>
				Apple has reportedly "clarified" its plans for the cloud to music
				industry execs, emphasizing that it doesn't want to undermine its
				dominance in the download market by rolling out yet another streaming
				service. Instead, the company supposedly wants to offer digital locker
				services for existing iTunes purchases.
			</p>
		</div>

	</body>
</html>

I thought I had it figured out, but I’m probably way off! sigh

My biggest issue is adjusting the following section based on whether the paragraph is the tallest of the image is the tallest.

This is going in Paul’s nifty “Elastic 3-Column Layout” so this section needs to be “fluid” (I’m pretty sure).

Oh, and I guess it isn’t that big of a deal if when the paragraph is taller than the image if it wraps around the picture by going more to the left. (I still like the “gutter” between the paragraph and image, but I could live without one if it is too unwieldy?!)

Anyways, feedback on my best stab at this would be appreciated.

Thanks,

Debbie

[system]

^ Let me stab this

How many rooms do you have in a 100mp house? 4-5 or 20? Are you dividing your bedroom every other 10 inches? Things have a natural flow, use it, that’s all I’m saying.

BTW, there is such a thing called clearing floats

[Rayzur]

All the cool people are going “Elastic” and “Fluid” my man!! Dontcha know?!
I have plenty of experience with elastic and fluid layouts thank you.

I thought I had it figured out, but I’m probably way off!
I thought you did too, in that code you just posted you stripped the <p> tags back off from the span and the image.
Now you got your chickens running loose with your cattle again.

That’s part of what I was trying to explain with the last several posts. I even included links for you to read.

[rguy84]

Off Topic:

Debbie- for alt tags, you don’t need to put “image of”. The screen reader announces it is an image.

[DoubleDee]

@noonnope

Hey Debbie, you should really cool down. You seem to be having a bit of an attitude these days, and I don’t really care for that.

I was being sarcastic… Like you don’t know about that?

If you are set on doing things YOUR way, there’s no need to be rude with those trying to offer THEIR insight, OK?

Noonnope is upset about someone being “rude”? That’s the pot calling the kettle black! (Is this Noonnope’s nicer twin filling in??)

Debbie

[DoubleDee]

Rayzur,

Your “studliness” never ceases to amaze me!!

Nice simple markup!

It looks good, but as always, I have questions which I’ll add in a new post.

Thanks!

Debbie

[DoubleDee]

@noonnope

^ Let me stab this

What are you “stabbing”? :-/

No knives please!

How many rooms do you have in a 100mp house?

What is a “100mp house”??

4-5 or 20? Are you dividing your bedroom every other 10 inches? Things have a natural flow, use it, that’s all I’m saying.

You lost me on the house thingy.

FWIW, Rayzur divided things up like I originally was thinking. (I just brought up <DL><DT><DD> to have a “Plan B” and think more semantically. Turned out that was a wrong approach for my case.)

BTW, there is such a thing called clearing floats

Which I am still learning about.

Not sure how that applies to what you are talking about, though.

Debbie

[DoubleDee]

@Rayzur

I have plenty of experience with elastic and fluid layouts thank you.

You’re welcome!

@doubledee

I thought I had it figured out, but I’m probably way off!

I thought you did too, in that code you just posted you stripped the <p> tags back off from the span and the image.

Now you got your chickens running loose with your cattle again.

That’s part of what I was trying to explain with the last several posts. I even included links for you to read.

I did read everything you told me. And I did read all of your links. (That’s why I was up until 2:00a.m. again?!

I stripped off the <P> in desperation because I can’t get my text to behave exactly like I want?!

I’ll explain in a new post.

(BTW, nice Texas metaphor there…)

Debbie