Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    124
    Thanks
    7
    Thanked 0 Times in 0 Posts

    floats not pushing borders of divs?

    See http://mikelambert.me/floatdiv.htm

    So I'm trying to float an element to the right of a bunch of text on the screen. The float is making the text wrap, as expected. I have a border on the top of the titles, but the float isn't making the actual div smaller. Its just making the text in the div wrap. The title border-top is going right through the float.

    How can I make the float make the div smaller so my title borders stop before the float?

    The same problem is effecting the margin-right of the <p>'s (lorem).
    Last edited by Duffman12; 11-20-2009 at 03:40 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Apply a margin-right to .title page equivalent to the width of the floated elements plus borders.

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Posts
    124
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I've updated http://mikelambert.me/floatdiv.htm

    Applying the margin-right will only work for the .titles that are next to the div. Look at the titles that are below the float, I want that one to go all the way across.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Well, a very simple solution would be to apply a background-colour to the floated div - but maybe that won't work with your design?

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Posts
    124
    Thanks
    7
    Thanked 0 Times in 0 Posts
    yeah, currently, the floated div has a separate background color than the regular background. So the title borders go all the way up to the floated div and stop. I want it to have some sort of margin.

    That's a good idea though. If there really isn't a way to get the title divs to shrink, i can make the floated div the same color as the background, then embed a separate div inside the floated one and apply my styles to that. Kind of a hack, but it'll work...


  •  

    Posting Permissions

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