LinuxQuestions.org
Visit Jeremy's Blog.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 06-08-2010, 08:09 AM   #1
rubadub
Member
 
Registered: Jun 2004
Posts: 236

Rep: Reputation: 33
HTML / CSS: Overflow div in a table


The easiest way to demonstrate this is with a touch of code:
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.
 
Old 06-08-2010, 08:24 AM   #2
rubadub
Member
 
Registered: Jun 2004
Posts: 236

Original Poster
Rep: Reputation: 33
Funnily enough, checking the source of this site gave me an answer, it's a work around, but...

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>

<pre style='margin:0px;margin-right:-99999px;width:98%;background-color:#faf;font-size:16px;overflow-x:scroll;'>This is an extra long piece of text which will need to overflow onto the next line or push out...</pre>
<br />

</td></tr></table>

</div>
 
1 members found this post helpful.
Old 06-08-2010, 06:00 PM   #3
fruttenboel
Member
 
Registered: Jul 2008
Location: Tilburg NL
Distribution: Slackware 14.2 ciurrent, kernel 3.18.11
Posts: 270

Rep: Reputation: 48
Quote:
Originally Posted by rubadub View Post
Funnily enough, checking the source of this site gave me an answer, it's a work around, but...
Well done! You solved the problem and posted the solution! Now we all can learn from it!
 
Old 06-08-2010, 07:04 PM   #4
rubadub
Member
 
Registered: Jun 2004
Posts: 236

Original Poster
Rep: Reputation: 33
I left it open just to see if someone has a better solution...
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS: get div to expand with content Ephracis Programming 1 10-05-2009 11:50 AM
html / css footer <div> won't behave esteeven Programming 2 08-02-2009 08:04 AM
CSS div layout Chronothread Programming 1 09-29-2008 06:00 PM
simplest way to center a <div> on the screen via css tanoatlq Programming 4 06-02-2008 02:50 AM
css/html wtf? extra space below div nkoplm Programming 1 06-27-2007 03:31 PM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 03:43 PM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration