Empty Divs for paragraph separation

[Girard Ibanez]

Is there any thing wrong in using an empty div to separate <p> tags. I have pictures enclosed in Divs so that I can place a caption below the pix.

#blank {
 border: none;
 width: 100%;
 height: .5em;
 }

The problem is that if you have too many pictures and not enough paragraph text to separate the picture such as a news column, then it becomes crowded and the text does not flow nice.

The empty divs will act as a line separator or would it be correct to just place the pics and paragraghs inside the containing tag (.blank) and repeat this containment as necessary to make the pics and text flow nicely.

Since I will be using this numereous times per page, then I cannot use the div ID tag and must go with the .class tag. Is this correct?

Another solution would be to use the BR tag. Getting more confused ... need advice on proper solution.



Thanks,

girard

[mburt]

Since I will be using this numereous times per page, then I cannot use the div ID tag and must go with the .class tag. Is this correct?

Yes. You can define multiple elements in CSS with the class property.
Ex:

.blank {
 border: none;
 width: 100%;
 height: .5em;
}
...
<div class="blank">

There's nothing wrong with this at all actually.
But one problem:
The height (.5em) won't even work if you don't set the overflow to hidden. Take a look at this:

.blank {
 border: none;
 width: 100%;
 height: .5em;
 overflow: hidden
}

A div naturally has the height of a line, so if you make that height invisible the height specified will be it's actual height.

[Girard Ibanez]

I did some research on the tag "overflow" but can anyone explain in laymans term the meaning in a given example?

Perhaps this "overflow" tag will solve my problem that I encountered using a class tag to contain both a picture and a caption within a containing div.

The class tag with the pic and caption will flow out of the containing div (page) especially when the class tag is at the bottom of the paragraph of the page.

Here's an example 2 of the code where the caption of pic2 leaves the div tag and out the page.

Which example is the perferred method for pictures w/captions within a page of text (paragraghs)>

Example 1

[HTML]

<div id="container">
<p id="caption1"> <a href="http:#> </a> This is pic 1</p>
<p> some text here </p>
<p> some text here </p>
<p> some text here </p>
<p> some text here </p>
<p id="caption1"> <a href="http:#> </a> This is pic 2 xxxxxxx xxxxxx <br / > the above br tag is a no no</p>

</div>

/HTML]


Example 2

[HTML]

<div id="container">

<div class="caption1"> <a href="http:#> </a>
<p>This is pic 1 </>
</div>

<p> some text here </p>
<p> some text here </p>
<p> some text here </p>
<p> some text here </p>

<div class="caption1"> <a href="http:#> </a>
<p>This is pic 2 xxxxxxx xxxxxx <br / >
The above br tag is a no no</p>
</div>

</div>

/HTML]

[Girard Ibanez]

Well, I played around with Example 1 and that's definitely out of the question and more problematic arranging with in the paragraph.

Thanks a heap ....