SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2001
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problems with horizontal rule insid e a div

    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.

  2. #2
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    Back in Action Winged Spider's Avatar
    Join Date
    Jun 2001
    Location
    outside my mind
    Posts
    900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


  4. #4
    SitePoint Member
    Join Date
    Nov 2001
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I never figured out a way to get it to work, so I used an image. *shrugs*

    http://www.brokenchair.org

  5. #5
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Back in Action Winged Spider's Avatar
    Join Date
    Jun 2001
    Location
    outside my mind
    Posts
    900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


  7. #7
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    No. Phil.Roberts's Avatar
    Join Date
    May 2001
    Location
    Nottingham, UK
    Posts
    1,142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try putting this in your stylesheet:

    hr { display:block }
    THE INSTRUCTIONS BELOW ARE OLD AND MAY BE INACCURATE.
    THIS INSTALL METHOD IS NOT RECOMMENDED, IT MAY RUN
    OVER YOUR DOG. <-- MediaWiki installation guide

  9. #9
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •