SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Float constraining DIVs

    This is hard to explain, so a visual aid is here:
    http://dev.dave.imarc.net/examples/css-wants/

    I have a page of content divs (grey blocks containing content) extending 100% wide, going down the page.

    I want to float a block of text to the right, and have it constrain any 'content' div it comes in contact with like this (pushing 1 box) or this (pushing 2 boxes)

    But all I get is the content div extending accross the page, and only it's content running arround the float like this:
    http://dev.dave.imarc.net/examples/css-wants/
    the two CSS styles are listed in each box.

    Any ideas?? Thanks...

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't think you can do exactly what you want without changing the code specifically for each div.

    You can set a margin-right on the first div to clear the float to get the effect you want.
    Code:
     .gap {margin-right:305px}
    [/code]
    <div class="content gap"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Fusce vestibulum, urna ac dictum egestas, libero tellus posuere ante, sed tincidunt
    lacus ligula ac urna. Nam id enim. Morbi libero. Integer convallis. Nulla neque etc................
    [/code]

    Obviously you can't then make the second div down behave the same unless you apply a margin to that also. I can't see a way to do it automatically as floats only make room for themselves by applying padding to surrounding content and allowing the content to reflow around them.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I was afraid of that... unfortunately both lists are dynamic. Over time the yellow floating column will extend well beyond the first and second content block; and each content block is dynamic, some may just have 1 word, some may have paragraphs...

    I'm not doubting Paul, but if someelse thinks it is possible, let me know...

    Thanks

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Though, I'd rather do this entirely in CSS, I seem to be having better luck with tables...

    I recreated the page using tables - http://dev.dave.imarc.net/examples/css-wants/table.html - and it works a little better (if you resize the width of your browser, the grey blocks should wrap under, or be pushed to the left)...BUT unless there's a lot of content, the table doesn't extend the full width of the page.

    Is there a CSS only solution?
    Is there a mixed CSS/Table solution?

    I'm driving myself crazy...this doesn't seem like it should be so difficult


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
  •