#1
  1. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2005
    Posts
    101
    Rep Power
    0

    Mixing percents and ems with floats


    I have 2 columns. I have a very tall, narrow column on the left that needs to be exactly 22em wide. I also have a short, fat column on the right that I want to take up the rest of the screen's width.

    The problem is that I have to contian my code so that after all of the formatting syntax is done, I can put in a whole ton of text and the text will stay in the right column, and then when the text gets past bttom of the left column it will take the entire width of the screen.

    The way I'm doing it right now is by floating to the left both columns and using 29% width for the thin left column and 70% width for the fat right column. This adds up to less than 100% so the browser places them paralell. But if I were to absolutely size the left column (as I want to), 22em + 100% is definately more than 100%. I can't constrain it so it thinks 100% is 100% of the space available to the right column because the text has to be in that "corner" between the right side of the left column and the bottom of the right column.

    Any ideas on how I could solve this? If you can do it without floats, that would be even better- it might solve another of my problems.

    The page in question is here by the way. All of the formatting code is transcluded in, you probably won't be able to see it unless you're familiar with wikipeida. Please don't edit the page directly

    Thanks,
    froth
    Last edited by bug_m3_n0t; February 19th, 2007 at 03:05 AM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2006
    Location
    MA
    Posts
    167
    Rep Power
    28
    If I'm understanding you correctly, this would be very simple to accomplish. Simply set the left column to 22em width and float it left. That's it. the second column needs no settings. As you fill it with text it will take all available space to the right of the first column and once reaching the bottom of that float, will take full viewport width.
  4. #3
  5. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2005
    Posts
    101
    Rep Power
    0
    Nope, sorry

    This is what happens when I use your idea: the right column (which has a large div at the top of it) takes 100% of the screen space, which goes off the side of the screen since it's already offset 20em to the right.

    You can see the code by just clicking Edit this page at the top. Disregard the second half of the code; it's commented out.

    Thanks

    UPDATE:
    I got it to stay within the window (instead of scrolling off the right side) by using a table for the right column. You can see how it turned out here. Unfortunately, the all of the perfect spacing is thrown off by a couple of pixels because of tables' weirdness, so I can't use tables. So tables automatically stay within the window boundaries, while apparently divs do not. Do you know some kind of css property to force divs to adopt this behavior?
    Last edited by bug_m3_n0t; February 19th, 2007 at 02:36 PM.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2006
    Location
    MA
    Posts
    167
    Rep Power
    28
    which column are you considering the right column? and why the tables?
  8. #5
  9. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2005
    Posts
    101
    Rep Power
    0
    Originally Posted by wolfcry911
    which column are you considering the right column? and why the tables?
    The large block of instructions and all of the text below it.

    I used a table to try to counter the fact that when I use a div, it scrolls far past the right side of the screen (the link I provided )
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2006
    Location
    MA
    Posts
    167
    Rep Power
    28
    well the link you provide here shows a table, not a div. Trust me, this is super simple without the tables.
  12. #7
  13. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2005
    Posts
    101
    Rep Power
    0
    Originally Posted by wolfcry911
    well the link you provide here shows a table, not a div. Trust me, this is super simple without the tables.
    It's simple but it doesn't work. Look at the link. The div goes way off the side of the screen!
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2006
    Location
    MA
    Posts
    167
    Rep Power
    28
    I'm looking at the link, and I see tables... the problem is you have limited control of the page as a whole. The sections just outside what you're controlling are tables. Those tables aren't going to play well with what you're trying to accomplish.
    Last edited by wolfcry911; February 19th, 2007 at 06:51 PM.
  16. #9
  17. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2005
    Posts
    101
    Rep Power
    0
    Originally Posted by wolfcry911
    I'm looking at the link, and I see tables... the problem is you have limited control of the page as a whole. The sections just outside what you're controlling are tables. Those tables aren't going to play well with what you're trying to accomplish.
    I don't think that the rest of the wikipedia layout has anything to do with it; it constrains just like the left edge of the screen would if the wikipedia stuff wasn't there.

IMN logo majestic logo threadwatch logo seochat tools logo