Need to have spacing between end of div and beginning of paragraph

Question

I have text within a paragraph tag that that fits snug on the bottom of a div, which you will see in this picture: http://i44.tinypic.com/e05s0z.png

I could put some padding at the bottom of the div to fix this, but there might be multiple divs, depending on how many items are on that page.

What I need to do, is put some spacing between the end of the very last div (class="article") and the text within the paragraph tag.

Here is the css for the article class

.article {
  padding:10px;
  overflow:auto;
}

Text w/i the paragraph tag

<p>Herkimer County Community College does not 
discriminate on the basis of race, color, sex, 
national origin, age, handicap, or marital status 
in admission, employment, or in any aspect regarding 
the conduct of College business.</p>

What should I do?

Answer 1

Give the final paragraph an id - #disclaimer, perhaps - then style that to have padding-top.

<p id="disclaimer">Herkimer County Community College does not 
discriminate on the basis of race, color, sex, 
national origin, age, handicap, or marital status 
in admission, employment, or in any aspect regarding 
the conduct of College business.</p>

and...

#disclaimer {
 padding-top: 10px;
}

[EDIT] An alternative to this, based on your comments, would be to surround the article(s) in a div, and give that div.class a bottom-margin/padding style.

Answer 2

You could wrap your paragraph in a container that has padding at the top, so it doesn't matter what's above it.

For example, wrap it in a div with the following css

div.finaltext {
   clear: both;
   margin-top: 10px;
}

Answer 3

Could you simply add a couple of <br/> tags after the last div?

Answer 4

If you have other paragraphs on your website and do not want to give it an id or class, then you can also use

.article + p {padding-top: 10px;}

Some old browsers will not be able to make out this selector, though

Answer 5

there is also the first-child and last-child css methods

note: check browser compatability for those you wish to support

Answer 6

Here are your options as far as I see it:

1. Use the :last-child CSS3 pseudo class to target the last div. This isn't supported by IE at all, so depends how important that browser is to you whether this is an option, but at least other browsers would get the desired effect.

   .article:last-child { padding-bottom: 20px; }

2. Add a class to the last div with the same style as above. This isn't ideal and may or may not be possible depending on how the divs are generated.

3. Add a class to the p tag with a padding-top value.

4. Use .article + p selector to target a p tag that is a direct sibling of .article. This is supported in IE7 (I think) but not IE6.

I would always give preference to #1 or #4 as it reduces clutter in the HTML, but as I mentioned IE could be a problem depending on your needs.

(thanks to Residuum for #4)

Answer 7

It's the construction like this?:

<div class="article">jdhfksdjhfksdhk</div>
<div class="article">jdhfksdjhfksdhk</div>
<div class="article">jdhfksdjhfksdhk</div>
<p>kfdhsjkfdks</p>

You use padding: 10px so the div has 10px inside margin.

If it's a CMS, I'm sure that the text of the paragraph could be wrapped inside another tag (DIV) or maybe a class for the (P). If this isn't the case, may I ask if there's a surrounding wrapper around all of the article divs and the p tag?

If that's the case then you can get to the P tag using CSS, if not, there's no way you achieve this in every browser.

OR... I realized you could do a trick here. but you've got to be sure you have a selectable div on top of the article divs.

It should be something like this:

.article { margin-top: -5px; margin-bottom: 15px; }

so, every div.article will move 5px up, leaving 10px of real margin betwen article divs. but the last one won't have the -5px move up, so you'll end up with 15px bottom margin for the P tag.

You could play with the numbers to make it the most comfortable number. And in case you need more control, then use the padding values you set to 10px in every way and set them accordingly to compensate the margin offset.