SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: WIDTH = % Issue

  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    WIDTH = % Issue

    I am trying to develop a dynamically spaced web page.

    My basic layout consists of a table with 3 columns.

    Code:
    <table border="0" cellspacing="0" cellpadding="0" width="100%">
       <tr>
          <td width=”30%” valign=”Top”></td>
          <td width=”50%” valign=”Top”></td>
          <td width=”20%” valign=”Top”></td>
       </tr>
    </table>
    Here is where I am having the problem. If I have a string of data that is longer then the specified width, the string does not wrap to the next line, instead it moves the other columns over. I do not want this to occur. Instead, I always want the columns to maintain the specified percentages.

    Here is a visual, lets say this is a picture displaying the correct specified percentages.

    Code:
    --------------------------------------------------
    | XXXXX XXXXX    | XXXX XXXX XXXXX | XXXXX XX XX |
    --------------------------------------------------
    Now I get a string of data that is longer than the % specified. Instead of wrapping the text, it moves the other columns to the right.

    Code:
    --------------------------------------------------
    | XXXXXXXXXXXXXXXXXXXXXXX | XXXX XXXX | XXXXXXX  |
    --------------------------------------------------
    How can I prevent this and maintain the percent spacing I specified?

    Thanks in advance for your help.

  2. #2
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    London
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    <table style="table-layout: fixed" border="0" cellspacing="0" cellpadding="0" width="100%">

    That will help... but note that the text needs to be able to wrap, i.e., the text needs to have spaces in. A string of XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX will break things.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the response. Here is what I am doing. I have a location on my site where people can post URL’s that they think someone else might want to see. The problem is the URL’s can get long but they are one string of data. How can I cause the string of data to get clipped (our forced to the next line) when word wrapping is not an option? I really want to maintain the column layout percentages I have. Do I have to go to a fixed width? I was hoping to avoid this since I like how sites dynamically change based on the window size.

  4. #4
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    London
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    table-layout: fixed does not mean fixed width: it means that a <td> width of (e.g.,) 30% is taken as an instruction rather than a "suggestion."

    For your long urls, you may have to look at the overflow property of the cell (td). Haven't tried this out, so you may need to do a spot of trial and error.

  5. #5
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I use this style sheet it, it does break the text but IE 6 still makes the td element as large as if the string was not broke.

    Code:
    <style>
    .ConstrainedWidth {
        word-wrap: break-word;
        width: 30%;
        overflow: hidden; 
    }
    </style>
    
    
    <td colspan="2">
       <span class="ConstrainedWidth">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
    </td>
    Any other thoughts would be appreciated.

  6. #6
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    London
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My main thought is: if you don't use table-layout:fixed... it's never going to work!

    This works in IE:
    HTML Code:
    <style type="text/css">
    <!--
    
    table{table-layout: fixed}
    
    td{
     /*overflow:hidden;*/
     border: 1px solid red
     }
    
    -->
    </STYLE>
    </head>
    <body>
    
    <table border="0" cellspacing="0" cellpadding="0" width="100%">
       <tr>
          <td width=”30%” valign=”Top”>30%</td>
          <td width=”50%” valign=”Top”>50%</td>
          <td width=”20%” valign=”Top”>20%</td>
       </tr>
    	 <tr>
          <td width=”30%” valign=”Top”>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  xx</td>
          <td width=”50%” valign=”Top”>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  xx</td>
          <td width=”20%” valign=”Top”>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  xx</td>
       </tr>
    </table>
    ... but you'd need to uncomment the overflow line to make it the same in Firefox.

    word-wrap: break-word (must confess it's the first time I've come across it) appears to have the desired effect in IE, but not for Firefox.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •