Force Wrapping/Overflow ?



  • Hey All,

    On the main site, the long comments will break the layout.

    I'm not a CSS Whiz, so I'm at a loss here. I set "overflow: auto", but I suspect because the container is not fixed width, it isn't working.

    Any ideas?



  • @Alex Papadimoulis said:

    Hey All,

    On the main site, the long comments will break the layout.

    I'm not a CSS Whiz, so I'm at a loss here. I set "overflow: auto", but I suspect because the container is not fixed width, it isn't working.

    Any ideas?

    found this:

    div id="col1" style="float: left; width: 300px; margin-right: 1em; border: 1px solid red; background-color: #fee; padding: 0 1em;"

    versus your:

    div id="ctl00_ctl01_bcr_ctl00___PostRepeater_ctl01_PostViewWrapper" class="ForumPostContentText"

    via http://www.the-art-of-web.com/css/float/

    I'll keep looking if you want.



  • Upon further inspection, overflow: auto probably isn't what you want. you probably want overflow: hidden (it just clips it off)

    there's something to be said about CSS stuff like this... this would never happen in fixed-width tables.

    Still looking (edit timers > current edit timer... so i can continue in my first post.)



  • looks like style="width: 640px" or whatever is what you want.

    also, dump

    <FONT face=Courier color=#006600><div style="clear:left"> </div></FONT>

    <FONT face=Courier color=#006600>at the end, RE: the last example on the linked site above.</FONT>

    <FONT face=Courier color=#006600></FONT> 

    <FONT face=Courier color=#006600>another site for cross reference: http://www.boutell.com/newfaq/creating/fixedwidthlayout.html</FONT>



  • also there is a "max-width" attribute, you can set this to something like 1600 (or 1280) px, since it's fairly uncommon anyone with a monitor larger than 21" is gunna want their browser fullscreen.

    For the sake of layout i'd say cap it at 1024 (or even smaller)

    sorry for the thousand posts, i'm just trying to help (and learn at the same time).

    --gene



  • Thanks for the pointers -- I'll give it a shot and see what happens. I was trying to avoid having to go fixed width, and allow the comment box to stretch.

    As for the TABLES vs FLOAT -- I spent hours trying to make the sidebar on the main site using DIVs as opposed to a TABLE. No luck, it looked different in every browser ...



  • @Alex Papadimoulis said:

    Thanks for the pointers -- I'll give it a shot and see what happens. I was trying to avoid having to go fixed width, and allow the comment box to stretch.

    As for the TABLES vs FLOAT -- I spent hours trying to make the sidebar on the main site using DIVs as opposed to a TABLE. No luck, it looked different in every browser ...

     what HTML(or whatever) software do you use? (obfuscate if you must), i'm just wondering what plugins are available.

    Dynamic page layout is one of those things... you can make it pretty some of the time in some of the browsers, but not all of the time in all of the browsers.

    Old fashion fixed width tables... at least you know how every browser is going to react. (almost!)



  • Forums are Community Server, main site is homebuilt, ASP.NET-based.



  • About DIVs VS TABLEs : floating divs are a nightmare, you never completely control how and where they display, it always leaves the possibility of bad surprises with dynamic content ( long lines, big pictures... ). I think replacing all tables by divs is just an overhyped stuff - in fact tables are not a deprecated standard in any way. Fixed layout ( like sidebars ) should be done with tables. In fact, the css property "display: table*" gives far more control over divs that the float property ... but guess what, it's not supported by IE6 🙂

    Could you give an example where the layout is broken so I can try some stuff ? ( one problem though, I won't be able to test it on IE )



  • Except that tables mean bigger pages, less flexibilty, nightmare maintanence and the fact that divs don't float unless you tell them to.

     Personally, I've never had an issue with floating divs, but that's because I code it correctly.
     



  • Well that's nice if you use absolute positioning. Still, I've seen many hyped 3-columns themes based on floating columns ; if your dynamic content happens to be too large the column wraps below the content, and when trying to get it working on FF+IE+Safari, that's frustrating as hell. So, if you say divs are always a substitute for tables ( ... and have it working on IE6, that is, without display: table* ), I can't agree. Neither can I agree if you use floating divs for a fixed layout ; that's not what this attribute is made for. But avoiding tables and using divs instead whenever it's going to work as intended and be sure any content won't mess it up, by all means, I agree and that's what I do myself.

    In no way I meant using tables exclusively, this is worse than
    exclusively using divs but that's really not the point here, I don't
    want a should-you-eat-no-meat-at-all-or-do-it-sparingly debate 🙂
     

     What's the maintenance problem when using a table for a 2 or 3 columns layout ? That's one shot around your page, no rows, no repeating html pattern, ...



  • @aikii said:

    Well that's nice if you use absolute positioning. Still, I've seen many hyped 3-columns themes based on floating columns ; if your dynamic content happens to be too large the column wraps below the content, and when trying to get it working on FF+IE+Safari, that's frustrating as hell. So, if you say divs are always a substitute for tables ( ... and have it working on IE6, that is, without display: table* ), I can't agree. Neither can I agree if you use floating divs for a fixed layout ; that's not what this attribute is made for. But avoiding tables and using divs instead whenever it's going to work as intended and be sure any content won't mess it up, by all means, I agree and that's what I do myself.

    In no way I meant using tables exclusively, this is worse than
    exclusively using divs but that's really not the point here, I don't
    want a should-you-eat-no-meat-at-all-or-do-it-sparingly debate 🙂
     

     What's the maintenance problem when using a table for a 2 or 3 columns layout ? That's one shot around your page, no rows, no repeating html pattern, ...

    Are you saying it's impossible to have a floating-div based 3 column layout which behaves well with content that's too big for the center column? If so, I point you at http://www.glish.com/css/7.asp which works fairly well. If you whack an image that's too big in the center column and view it in IE, it expands the center div off the right edge of the screen, but the right column is still in the right place from the point of view of the window, and the center column text looks correct.

     Also, the maintenance issue comes when you want to change your left hand column to one that runs across the top of the page. In a well designed div-based page, you don't need to touch the markup, which is a good thing.
     

    Tables have a purpose. Tabular data. Not layout. 



  • @growse said:

    Except that tables mean bigger pages, less flexibilty, nightmare maintanence and the fact that divs don't float unless you tell them to.

     Personally, I've never had an issue with floating divs, but that's because I code it correctly.
     

    hehehe... HAHA! ... oh wait... you're serious!

    how are tables a maintenance nightmare?

    Unless you're using vim, emacs, or notepad, i can't see how editing tables (especially ones with no borders) could possibly be construed as a nightmare.

    First off, relative column sizes, relative row sizes, no matter what rez, it is gunna look roughly the same (within logical boundaries)

    I'd love to see how floating divs look in lynx.

    Furthermore, if you can't comprehend how tables work, you shouldn't be using HTML. just put what you want on your website by doing it in word, printing, putting the paper on a table, taking a picture, upload to geocities. RINSE REPEAT.

    The whole idea of websites is to convey information. If you want to have awesome layouts, animations, and perfect looking pages on all platforms, use flash. that's what flash is meant for.

    On the other hand, if you're using HTML... Learn what it stands for, and use it as it is named. Text. Markup. Language. Not "pictures, flashy layouts, awesome interactivity"

    I think a majority of WTFs i see on the internet are because the authors of pages are trying waaaay to hard to be clever with CSS and Jscript and shtml pages and other such nonsense.

    If you don't understand HTML, don't make webpages. it's that simple.

     



  • My griefs were really against using "float" in layout, and I expected absolutely positioned work. I've seen so many float-based themes and people complaining about "unstable" columns ! 😕 But I must admit I haven't tried absolute positioning hard enough : I thought it meant size would never adapt to window size. The example you give shows it works. Another thing just struck my mind : until recently I thought absolute positioning  were purely window coordinates. But then I've read this position was relative to the first positioned parent block. Doh ! I gave up absolute positioning just because I thought it was necessary to re-calculate every  sub-block's position when you change topmost blocks sizes. But looking at the whole picture now, life's better. I think your example just made my day 🙂

    edit: again, I think the overall abuse of "float" divs we see everywhere gives an non-deserved bad reputation to div-based layouts.



  • @GeneWitch said:

    @growse said:

    Except that tables mean bigger pages, less flexibilty, nightmare maintanence and the fact that divs don't float unless you tell them to.

     Personally, I've never had an issue with floating divs, but that's because I code it correctly.
     

    hehehe... HAHA! ... oh wait... you're serious!

    how are tables a maintenance nightmare?

    Unless you're using vim, emacs, or notepad, i can't see how editing tables (especially ones with no borders) could possibly be construed as a nightmare.

    First off, relative column sizes, relative row sizes, no matter what rez, it is gunna look roughly the same (within logical boundaries)

    I'd love to see how floating divs look in lynx.

    Furthermore, if you can't comprehend how tables work, you shouldn't be using HTML. just put what you want on your website by doing it in word, printing, putting the paper on a table, taking a picture, upload to geocities. RINSE REPEAT.

    The whole idea of websites is to convey information. If you want to have awesome layouts, animations, and perfect looking pages on all platforms, use flash. that's what flash is meant for.

    On the other hand, if you're using HTML... Learn what it stands for, and use it as it is named. Text. Markup. Language. Not "pictures, flashy layouts, awesome interactivity"

    I think a majority of WTFs i see on the internet are because the authors of pages are trying waaaay to hard to be clever with CSS and Jscript and shtml pages and other such nonsense.

    If you don't understand HTML, don't make webpages. it's that simple.

     

     

    Sorry, what?

     As I explained above, using tables for layout is a maintenance nightmare because it doesn't allow you to change the layout very easily. You want that side column to become a top row? Try doing that quickly and easily using a table. With a div, it's just a question of changing a few styling properties. I don't know about you, but to me, that's a little easier.

    If you're talking about tables for data, then you can't read, as I think I made it fairly clear that tables have a very good use, and that it's not for layout.

    Floating divs degrade wonderfully in lynx, because that ignores styling. Therefore you just get the markup presented to you in whatever order it's in on the page, which if you do right is sensible (menu at the top, then page title, then content). I don't quite understand from where you got the impression that I don't know how HTML works. It's a markup language, which means it conveys data, and information about that data. So a markup language will say "Hey, here's a heading. Now have some paragraphs. Oh look, an image. Now here comes a table". The way you render that information to the user requires more information, usually called styling, which tells the rendering device (browser, printer, whatever) how and where to draw different bits of the markup. It's very simple. Yes, websites are there to convey information. But I'd argue that an HTML page that has some sensible styling to it conveys the information better than the raw HTML code itself. That's what styling does - it allows the information to be conveyed sensibly, which I think is a good thing.

     People abuse styling, yes. I'm not going to disagree. Doesn't mean CSS is a bad thing. And for the record, you seem to be the only person talking about animations and the like.

    And personally I think vim is one of the best editors I've ever used.

     



  • meanwhile, crying on his keyboard, alex sobbing : "oh no, what I've done !"

    I feel sorry for all that fuss 🙂 I hope you'll get your layout fixed soon. My personal conclusion for what I've just learned, I'd try to get rid of the float property, and instead use position: absolute with top/left/right properties. I guess you won't even have to touch the template and just change the stylesheet.



  • Looks like this did the trick. I simply wrapped the comments div like this:

    <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%" style="table-layout: fixed;"><tr><td>
    {Comments Div}
    </td></tr></table>

    <FONT color=#0000ff size=2><FONT color=#000000>After trying a number of different things, this odd technique seems to work: Comments that force their way out of the bounds of the box get a scroll bar instead of stretching the box.</FONT>

    </FONT>


  • @GeneWitch said:

    @growse said:

    Except that tables mean bigger pages, less flexibilty, nightmare maintanence and the fact that divs don't float unless you tell them to.

     Personally, I've never had an issue with floating divs, but that's because I code it correctly.
     

    hehehe... HAHA! ... oh wait... you're serious!

    how are tables a maintenance nightmare?

    Unless you're using vim, emacs, or notepad, i can't see how editing tables (especially ones with no borders) could possibly be construed as a nightmare.

    First off, relative column sizes, relative row sizes, no matter what rez, it is gunna look roughly the same (within logical boundaries)

    I'd love to see how floating divs look in lynx.

    Furthermore, if you can't comprehend how tables work, you shouldn't be using HTML. just put what you want on your website by doing it in word, printing, putting the paper on a table, taking a picture, upload to geocities. RINSE REPEAT.

    The whole idea of websites is to convey information. If you want to have awesome layouts, animations, and perfect looking pages on all platforms, use flash. that's what flash is meant for.

    On the other hand, if you're using HTML... Learn what it stands for, and use it as it is named. Text. Markup. Language. Not "pictures, flashy layouts, awesome interactivity"

    I think a majority of WTFs i see on the internet are because the authors of pages are trying waaaay to hard to be clever with CSS and Jscript and shtml pages and other such nonsense.

    If you don't understand HTML, don't make webpages. it's that simple.

    Tables are good for [i]tabular[/i] data, not to format presentation. And if you think its not a maintenance nightmare, you've clearly never had the pleasure of wading through a series of autogenerated td's with layout inline. heck a majority of the wtf's here for we design were nested td's. not to mention w3c compliance, screenreaders, mobile devices, etc. CSS-based design is [b]far[/b] superior to table layout. Table layout was great back in 1995. check out http://csszengardens.com



  • sorry, i got the site wrong. it should be http://www.csszengarden.com singular, [b]not[/b] plural as i put above...



  • @pbounaix said:

    sorry, i got the site wrong. it should be http://www.csszengarden.com singular, [b]not[/b] plural as i put above...

    Funny you should mention that. It is a textbook example of CSS abuse. In fact, the majority of their styling examples is done by replacing slabs of text with hardcoded bitmap images of that text. Perfectly useless for dynamic content such as this forum site.

    CSS is a good thing, but these zen freaks have completely misunderstood its purpose: separate style from content
     


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.