Solved

text in a table cell that overflows into another cell

Posted on 2003-10-29
13
414 Views
Last Modified: 2010-04-09
How can I have text flow into another cell when the first cell is "full?" In other words, I want to set a certain width and length for a TD cell and when the content of that cell exceeds the space to hold it, the content will spill over into another cell.
0
Comment
Question by:kevcole2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 2
  • +2
13 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 9645077
Can I ask why you're doing this - from a layout perspective?
0
 

Author Comment

by:kevcole2
ID: 9645253
I have a blog using Blogger.com and in the Archives it has all the dates one after the other all the way down the page, ie:

10/01-10/8
10/9-10/16

and so forth

I want it to flow into a column next to it so that the page doesnt' scroll, at least as much.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9645450
Do you need this to happen automatically - or are you inserting the dates manually:

In other words - can you set it up like this?

<html>
<head>
</head>
<body>
<div style="float:left; width:200px;">
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="100%"><b>2002</b><br>
    <div class="archive"><a href="2002_02_03_kevincole_archive.html">02/03/2002 - 02/09/2002</a><br></div>
    <div class="archive"><a href="2002_02_10_kevincole_archive.html">02/10/2002 - 02/16/2002</a><br></div>
    <div class="archive"><a href="2002_02_24_kevincole_archive.html">02/24/2002 - 03/02/2002</a><br></div>
    <div class="archive"><a href="2002_03_03_kevincole_archive.html">03/03/2002 - 03/09/2002</a><br></div>
    <div class="archive"><a href="2002_03_10_kevincole_archive.html">03/10/2002 - 03/16/2002</a><br></div>
    <div class="archive"><a href="2002_04_14_kevincole_archive.html">04/14/2002 - 04/20/2002</a><br></div>
    <div class="archive"><a href="2002_04_21_kevincole_archive.html">04/21/2002 - 04/27/2002</a><br></div>
    etc...
    </td>
  </tr>
</table>
</div>
<div style="float:left; width:200px;">
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="100%"><b>2003</b><br>
    <div class="archive"><a href="2003_02_16_kevincole_archive.html">02/16/2003 - 02/22/2003</a><br></div>
    <div class="archive"><a href="2003_02_23_kevincole_archive.html">02/23/2003 - 03/01/2003</a><br></div>
    <div class="archive"><a href="2003_03_16_kevincole_archive.html">03/16/2003 - 03/22/2003</a><br></div>
    <div class="archive"><a href="2003_04_13_kevincole_archive.html">04/13/2003 - 04/19/2003</a><br></div>
    <div class="archive"><a href="2003_04_27_kevincole_archive.html">04/27/2003 - 05/03/2003</a><br></div>
    <div class="archive"><a href="2003_05_25_kevincole_archive.html">05/25/2003 - 05/31/2003</a><br></div>
    <div class="archive"><a href="2003_06_01_kevincole_archive.html">06/01/2003 - 06/07/2003</a><br></div>
    etc..
    </td>
  </tr>
</table>
</div>
</body>
</html>
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:kevcole2
ID: 9646778
It needs to happen automatically.

All I get for the archives is:

<Blogger><div class="archive">
      <a href="<$BlogArchiveLink$>"><$BlogArchiveName$></a><br>
</Blogger></div>

In other words, I need something that says "hey the length of this TR is only supposed to be 500pixels, but the data is enough for 600pxs. Let's put that last 100pxs worth of information in the next column over."

The more I think about this, the more it seems impossible. But I swear I read a tutorial on this once but just cannot find it again for the life of me.
0
 
LVL 17

Expert Comment

by:dorward
ID: 9648037
Maybe you want something like:

<td
  style="width: 500px; overflow: visible;">
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9649623
You probably have a couple of options:

Create a scrolling div to hold the list:

<div class="date">Archives</div>
<div style="height: 200px; width:500px; overflow: auto;">
<BloggerArchives>
  <a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a>
</BloggerArchives>
</div>

I believe the updated Blogger version allows you to post the archive links directly on your home page. Using this, you can change your frquency to display archives by month, instead of by week.

Here's an example that uses this setup:
http://ocfan.blogspot.com/2003_09_01_ocfan_archive.html
0
 
LVL 51

Expert Comment

by:ahoffmann
ID: 9669707
as dorwad said: overflow:visible  is what you want, more reliable would be  overflow:scroll
0
 
LVL 6

Expert Comment

by:ren_b
ID: 9680120
you can't overflow text into another cell...yet. its being implemented in CSS 3 and is gonna be pretty nice. the only other alternative is using javascript, but that would be big and bad
http://www.w3.org/TR/2001/WD-css3-multicol-20010118/
0
 

Author Comment

by:kevcole2
ID: 9681146
how big and bad?

thanks for the w3 link.

0
 
LVL 6

Expert Comment

by:ren_b
ID: 9683578
well the basic rundown on it would be something like this...
you have your text, on load, you'd have to check the cell's  height, and if it excedes what you wan't you'd take the innerHTML and split it, and then create a new div/cell and add what you cut from the first thing and put it in there.

now that i think about it tho, i don't think it'd work because you have the <%...%> tag there instead of the full thing.

i don't want to think about it, just seems painful especially the multi-columns in css to come soon, maybe next generation of browsers?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9744160
Hi kevcole2,

I noticed you updated your page to the new blogger version that let's you display your archives on the home page - do you need any more asisstance with this?

Thanks,
georgemarian
0
 

Author Comment

by:kevcole2
ID: 9744511
No I'm happy with it now, thanks for asking georgemarian. Who gets the points since there really wasn't an answer for this one?
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
ID: 9744561
If there were ne solutions, post a request in Community Support to have them refund the points to you. They'll post a message here just to make sure it's okay with everyone... I can also do this for you if you like.
(Sorry, I thought you had updated the blogger page as per my suggestion to get rid of the separate archives page...)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question