problems with horizontal rule insid e a div

[tomorama]

I'm having a problem with creating a horizontal rule effect inside a div.

The setup: I've got 2 divs directly next to each other. Div 1 is set to float: left so that the text in div2 wraps around div1. Both these divs are inside a wrapper.

The problem: I want to create a horizontal rule between blocks of text inside div 2 (the one containing the text), however when I use the hr tag, it's width is rendered in relation to the wrapper div instead of div 2. This causes the rule to extend underneath div 1, which is floating left of the div containing the horizontal rule.

My code is valid css and xhtml; this problem occurs in NS 6.2 and Opera 6, but not IE 6. IE 6 renders the rule the way I want it.

[isotope235]

Hey,

A few ideas to expriment w/:

Try setting margin prop's for the <hr>. You might also try floating the <hr>.

If that deosn't work, post the code. I'll mess w/ it after work some.

HTH

[Winged Spider]

I'm interested to see what the page looks like.

I didn't follow the description too well, but it sounds cool. Could you post the URL to the site?

[tomorama]

I never figured out a way to get it to work, so I used an image. *shrugs*

http://www.brokenchair.org

[Ian Glass]

Well the graphics you use look very nice. :-)

I don't think there's a way to get the effect you want, Tomorama. There's probably a CSS2 or 3 property, but I doubt if any browsers support them now. Sorry.

[Winged Spider]

Nice, Very Nice.

I always love seeing great looking sites that adhere to standards. The world of DIV design is growing, seeing sites like that really make a point that DIV design is cabaple of non-boring sites.

[isotope235]

Nice site. Like the use of <div> positioning.

I have to disagree w/ Ian though, I think this can be done w/ CSS. Didn't have time to mess w/ it yesterday.
I'm gonna give it a go after work.

[Phil.Roberts]

Try putting this in your stylesheet:

hr { display:block }

[Ian Glass]

I thought block items filled the space under the floating element, just the text (and inline element) wrap. If you apply a background color to "satellite" I think it'll demonstrate my point clearer.