Jump to content

Overflow div in a table


mentalist

Recommended Posts

The easiest way to demonstrate this is with a touch of code:

<div style='width:400px;background-color:#aff;font-size:16px;'>
This should be about the right width...............<br />
<br />

<!--<table width='100%'><tr><td>-->
<div style='background-color:#faf;font-size:16px;'><pre>This is an extra long piece of text which will need to overflow onto the next line or push out...</pre></div>
<br />
<div style='background-color:#faf;font-size:16px;overflow-x:scroll;'><pre>This is an extra long piece of text which will need to overflow onto the next line or push out...</pre></div>
<br />
<div style='background-color:#faf;font-size:16px;overflow-x:scroll;white-space:pre;'>This is an extra long piece of text which will need to overflow onto the next line or push out...</div>
<br />
<!--</td></tr></table>-->

</div>

 

As is the code should do what it's supposed to do. But if you remove the quotes and wrap the divs in a table then they inherit width from somewhere and push out of the container...

 

Any suggestions as to how to restrain them?

 

Cheers!

 

 

P.S. I can't stop these overflow divs from not being placed within tables, so just removing the table is not enough.

Link to comment
Share on other sites

  • 4 months later...

It's been a while and if I remember correctly I found a workaround (from linuxquestions.org forum source), but...

 

The container div has a width, I was wanting everything inside to conform to that width (as a max anyway).

 

 

p.s. I'll try and find the solution I found and post it (can't believe I didn't at the time...)

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.