CSS overflow issue working and not working

Question

You can see the problem with the overflow not working as expected here: http://dptest.dream-portal.net/index.php

But if you view the post, the overflow is handled perfectly right here: http://dptest.dream-portal.net/index.php?topic=6.msg15#msg15

BUT WHY?? What do they do differently? But, most important, how can I change my HTML code within the middle section here (http://dptest.dream-portal.net/index.php) to work exactly like it works in the post.

Can someone out there please help me? The middle section needs to be contained within the actual width of the page, the left and right sections each have a width of 200px, but the middle section it is exceeding the boundaries and stretching it out because one of the results within this section is returning a BBC code tag that is responsible for this. How can I fix this?

Thanks

I don't have much advice on how to contain your table layout properly other than to suggest not using a table for your layout. — kinakuta
– kinakuta, Commented Sep 14, 2011 at 16:59
Well, the problem is the layout can be changed in many different ways via the Admin Panel, so using a table for the layout is the only way to do this with cross-browser compatibility AFAIK. Using <div> tags do not support ALL possible layouts. And I'm not interested in using a CSS Framework either, because these frameworks don't support ALL Layouts either. — SoLoGHoST
– SoLoGHoST, Commented Sep 14, 2011 at 17:06
There's gotta be some sort of workaround for this. Maybe we can get the width of the middle section somehow and do something with that...? — SoLoGHoST
– SoLoGHoST, Commented Sep 14, 2011 at 17:12

jackJoe · Accepted Answer · 2011-09-14 17:57:22Z

1

try this:

code.bbc_code {
    background: none repeat scroll 0 0 #EEEEFF;
    border-bottom: 2px solid #999999;
    border-top: 2px solid #999999;
    display: block;
    font-family: "dejavu sans mono","monaco","lucida console","courier new",monospace;
    font-size: x-small;
    line-height: 1.5em;
    max-height: 24em;
    overflow: auto;
    padding: 3px 1em;
    white-space: normal;
}

The nowrap is the culprit...

answered Sep 14, 2011 at 17:57

jackJoe

11.1k8 gold badges54 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS overflow issue working and not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related