Comments on: CSS Overflow Property Explained http://divitodesign.com/css/css-how-to-use-overflow/ Articles, Tutorials and Resources for the Webdesigner Wed, 10 Mar 2010 04:22:11 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: CSS Overflow Property Explained " DivitoDesign | CSS Tutorials - CSSHelper.net http://divitodesign.com/css/css-how-to-use-overflow/comment-page-1/#comment-19415 CSS Overflow Property Explained " DivitoDesign | CSS Tutorials - CSSHelper.net Fri, 20 Mar 2009 09:40:15 +0000 http://www.divitodesign.com/blog/2007/12/css-how-to-use-overflow/#comment-19415 [...] Source [...] [...] Source [...]

]]> By: CSS: How to use Overflow : infoeduindia multimedia collection http://divitodesign.com/css/css-how-to-use-overflow/comment-page-1/#comment-18483 CSS: How to use Overflow : infoeduindia multimedia collection Mon, 09 Mar 2009 15:46:54 +0000 http://www.divitodesign.com/blog/2007/12/css-how-to-use-overflow/#comment-18483 [...] View Tutorial [...] [...] View Tutorial [...]

]]> By: Alexandru Savin http://divitodesign.com/css/css-how-to-use-overflow/comment-page-1/#comment-16808 Alexandru Savin Sat, 21 Feb 2009 09:14:13 +0000 http://www.divitodesign.com/blog/2007/12/css-how-to-use-overflow/#comment-16808 Very nice and simple explanation. I am the coder that always has problems with css :). Very nice and simple explanation. I am the coder that always has problems with css :) .

]]> By: Skweekah the Poof http://divitodesign.com/css/css-how-to-use-overflow/comment-page-1/#comment-15937 Skweekah the Poof Wed, 11 Feb 2009 04:10:31 +0000 http://www.divitodesign.com/blog/2007/12/css-how-to-use-overflow/#comment-15937 Good explanation. I may be a big poof but I know how to hide the sausage. Skweekah Dha Poof Good explanation. I may be a big poof but I know how to hide the sausage.
Skweekah Dha Poof

]]> By: Stefan Vervoort http://divitodesign.com/css/css-how-to-use-overflow/comment-page-1/#comment-13576 Stefan Vervoort Thu, 15 Jan 2009 13:22:29 +0000 http://www.divitodesign.com/blog/2007/12/css-how-to-use-overflow/#comment-13576 I am not very sure. I think it is possible, perhaps you can test it? :) I am not very sure. I think it is possible, perhaps you can test it? :)

]]> By: Mark D http://divitodesign.com/css/css-how-to-use-overflow/comment-page-1/#comment-13565 Mark D Thu, 15 Jan 2009 09:49:34 +0000 http://www.divitodesign.com/blog/2007/12/css-how-to-use-overflow/#comment-13565 I just wondered with these Div tags. Can you insert images in them? Cheers, Mark I just wondered with these Div tags.

Can you insert images in them?

Cheers,
Mark

]]> By: SPP http://divitodesign.com/css/css-how-to-use-overflow/comment-page-1/#comment-13513 SPP Wed, 14 Jan 2009 10:52:52 +0000 http://www.divitodesign.com/blog/2007/12/css-how-to-use-overflow/#comment-13513 I just figured out the solution myself, so I present it here in case someone else has the same requirements: Put a div inside the table cell, with the following CSS style: height: 25px; line-height: 25px; white-space: normal; overflow: hidden; So now the cell content will be clipped to only one row of text. I just figured out the solution myself, so I present it here in case someone else has the same requirements:

Put a div inside the table cell, with the following CSS style:

height: 25px;
line-height: 25px;
white-space: normal;
overflow: hidden;

So now the cell content will be clipped to only one row of text.

]]> By: SPP http://divitodesign.com/css/css-how-to-use-overflow/comment-page-1/#comment-13511 SPP Wed, 14 Jan 2009 09:25:37 +0000 http://www.divitodesign.com/blog/2007/12/css-how-to-use-overflow/#comment-13511 Hello guys! I would really appreciate if anyone could help me please on this most intriguing issue: I have a html table with width=100% and with 3 columns: name, description, date. I want the column widths to be relative to the browser's window size (so the user can resize the table when resizing the window) like this 30%, 50%, 20%. But I also want that the text inside each cell to be written on only one line (white-space: nowrap), and be clipped by the browser if it's longer than one line (i.e wider than the cell's width) (overflow: hidden). Unfortunately, the clipping does not seem to work with % width, but only with specific pixel widths. Did anyone had the same problem before? Do you know of a solution? Can it be done in CSS? Or it can only be done with javascript (onresize set the new width for the cell)? Thank you in advance. Hello guys!

I would really appreciate if anyone could help me please on this most intriguing issue:

I have a html table with width=100% and with 3 columns: name, description, date.

I want the column widths to be relative to the browser’s window size (so the user can resize the table when resizing the window) like this 30%, 50%, 20%.

But I also want that the text inside each cell to be written on only one line (white-space: nowrap),
and be clipped by the browser if it’s longer than one line (i.e wider than the cell’s width) (overflow: hidden).

Unfortunately, the clipping does not seem to work with % width, but only with specific pixel widths.

Did anyone had the same problem before? Do you know of a solution? Can it be done in CSS? Or it can only be done with javascript (onresize set the new width for the cell)?

Thank you in advance.

]]> By: Jordan Garn http://divitodesign.com/css/css-how-to-use-overflow/comment-page-1/#comment-12549 Jordan Garn Tue, 30 Dec 2008 23:23:42 +0000 http://www.divitodesign.com/blog/2007/12/css-how-to-use-overflow/#comment-12549 Overflows can come in very handy, especially for Internet Explorer bugs. Thanks for the info. Overflows can come in very handy, especially for Internet Explorer bugs. Thanks for the info.

]]> By: highfirefly http://divitodesign.com/css/css-how-to-use-overflow/comment-page-1/#comment-9647 highfirefly Tue, 18 Nov 2008 20:02:12 +0000 http://www.divitodesign.com/blog/2007/12/css-how-to-use-overflow/#comment-9647 I have tried this to create a horizontal scroll only and it worked on my mac in Safari and Firefox but I am still getting a vertical scroll on a PC laptop. Any answers? I have tried this to create a horizontal scroll only and it worked on my mac in Safari and Firefox but I am still getting a vertical scroll on a PC laptop. Any answers?

]]>