SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot AVdes's Avatar
    Join Date
    Jun 2005
    Location
    GA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    text in two columns with one div?

    Is it possible to put text into two columns with only one div? The reason I ask is because the text field has an absolute height and as more text is added to the column it needs to move over to the second column. Maybe this isn't even possible. Any thoughts?
    CSS Club mantra; "I hate IE6, I hate IE6, I hate IE6".
    http://www.avdes.com

  2. #2
    SitePoint Zealot AVdes's Avatar
    Join Date
    Jun 2005
    Location
    GA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    also is it possible to make a float where the blocks are moving vertically till they run out of space then the next one will move over to the right top where there is more space.

    If so then I can place the paragraphs into <p> tags and float them creating a virtual two column layout that will update as the page expands or contracts. In theory anyway. I'm sure there's no way to actually do the floats this way. But just in case there is a way... Does any one know?
    CSS Club mantra; "I hate IE6, I hate IE6, I hate IE6".
    http://www.avdes.com

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have two paragraphs (for example), I'd probably float the first, and then apply overflow: auto; to them both (as well as some margins) so the text doesn't overlap if they grow beyond their container's height.

  4. #4
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This isn't what you want but it's the closest thing I can think of. I also work in floats a lot so hopefully this trick (which works on my site) will be compatible with your design.

    Define two or more elements (it doesn't matter what as long as they all are block elements) and define their width in percentages. Obviously, make sure the percents add up to less than 100&#37; (sometimes you have to go much lower, 80-95%) and you can get them to all float next to each other. Floating everything left is easiest, but I've worked with nastier designs. Given enough room, the elements will float next to each other, but when "squished" in a browser, the element(s) furthest to the right will drop underneath the first element(s) naturally.

    It's not exactly what you're looking for, but it's my closest solution.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.


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
  •