use style to place an HR at the bottom of a DIV

[Tom Cat]

Hi,

I'm trying to move my site from table layout to div/span CSS layout.

I have a chunk of text and images within a div tag. At the end of that
chunk, but still within the div tag, is an HR. For layout, the div is
min-height:250px tall, which means if you've got standard settings, the
text and images end about 50px before the end of the div. Of course
with HR 50px before the end if the div, it looks funny as the next
element looks like there is too much space at the top. What I want to
be able to do is place the HR at the very botom of the DIV. I have
tried adding a style="vertical-align:bottom" to the HR tag, but that
didn't work. I then added position:absolute to the style atribute and
that moved it all the way to the bottom of the page. I can't force it
to be 250px down from the top of the screen, as the site is dynamically
generated and there might be more the HR would then go through the text
(a bad thing).

Can anyone help me?

[Spartanicus]

"Tom Cat" <st******@yahoo.com> wrote:

I have a chunk of text and images within a div tag. At the end of that
chunk, but still within the div tag, is an HR.

The use of <hr>s in modern markup is rarely justified. They are often
used only for styling purposes, in which case they should be removed and
their function moved to CSS. In your case the solution would be to style
the bottom border of the containing div.

--
Spartanicus

[Tom Cat]

Oh wow I didn't know this could be done.

I removed the HR tag and added
border-bottom:solid;border-bottom-width:1px;
to the style atribute in the div tag.

It works really well. The only problem now is that I have to figure
out how to make the line only 30% of the page width and centered in the
text area. My CSS reference doesn't tell me how to do that. Does
anyone here know?

[Spartanicus]

"Tom Cat" <st******@yahoo.com> wrote:

I removed the HR tag and added
border-bottom:solid;border-bottom-width:1px;
to the style atribute in the div tag.

It works really well. The only problem now is that I have to figure
out how to make the line only 30% of the page width and centered in the
text area.

You'd need a separate element for that, but instead of the <hr> element
which suggests a structural division, non semantic markup should be used
if the purpose is decorative, example:
http://homepage.ntlworld.com/spartanicus/temp.htm

--
Spartanicus

[dwight.stegall]

The best place to get help when transforming your site from tables to
css is http://www.css-discuss.org/ The mailing list is owned by Eric A.
Meyers. He helped develop CSS for the W3C. You'll need to get an email
address dedicated to this mail list only. You will get between 50-100
emails a day.