#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    3
    Rep Power
    0

    CSS element sizing based on browser window, not content size


    Ok, after strenuously working to eliminate tables I have discovered this seeming Achilles Heel of CSS: sizing of elements is based on the browser window size, not the size of the content inside the elements. For instance, telling a div to have width: 100% makes it 100% of the available space in the window, NOT 100% of the width necessary to contain the content inside that div. This causes problems when you have log text (like URLs) or more important, when you have a nested forum layout where 100s of replies can exist toward the right and yet the div element won't expand to contain them, making them break out of the element and screw up the whole layout.

    Tables, for all their trouble, adhered to the width of the content in the cells, expanding to be as large as necessary to contain the content. There must be a way to work around this in CSS? Surely they didn't develop this complex layout standard and make it impossible to have layout function in this way?
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Yeah, CSS divs work differently from tables. I just made a few examples of div sizing which may suggest solutions for some of your problems. If you look at these, use different browser sizes.

    If you think sizing is a problem, wait 'til a float bites you in the butt

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    3
    Rep Power
    0

    Problems with overflow


    Well I tried employing a div overflow as your examples suggested. The problem is that it really slows down the rendering of the page (in Moz) and also when you scroll down a couple pages, it eventually screws up the rendering and some of the contents of the div get "streaked" and the display gets all messed up seriously.

    It's just so funny how everyone talks about "hacked table layouts" but yet CSS is almost just as deficient and has just as many problems and requires just as many "hacks" to get it to work.
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Perhaps your approach needs to be backed off from and looked at from a different angle.

    If you have multiple page lengths to scroll through, maybe the method is not appropriate. Can you post a URL that we can look at?

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    3
    Rep Power
    0
    Sure, check out this page. Notice that some wide content goes beyond the center element to the right. I did some tweaking to reduce the magnitude of the indents for each reply so there is less of a problem but inevitably, a deeply-replied-to thread will result in messages that break outside the center column, also on smaller resolutions this will be more of a problem.

IMN logo majestic logo threadwatch logo seochat tools logo