I am struggling quite a long time on this problem now and gave up living with ugly pages. Sometimes what you want to put into a <pre> is long like logfiles or badly wrapped source code (that you take automatically from somewhere). I want <pre> to only use a certain percentage of the width. For that I tried to use CSS overflow, embed the whole stuff inside a <div> and googled a lot of course. Here is the code I wrote so far. What do I have to change to make the <pre> only use the 20% of the width?

EDIT (after tries from suggestions):

  • white-space: pre-wrap; Ok but wraps instead of activating the scrollbars
  • white-space: pre-line; Loose of indentation (begin of line) what is important for source code
  • Both suggestions are without effect for IE8
  • The fact that <pre> is in a table seems to matter a lot...

[The HTML is validated for XHTML & CSS compliance so I made sure not using invalid properties and so on, but Firefox & IE8 seem to ignore what I am trying to tell them, too bad :-( ]

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <title>Pre hassle</title>
    <style type="text/css">
    pre {
        overflow: scroll;
    table.fullwidth {
        width: 100%;
    td.description {
        width: 80%;
    td.code {
        width: 20%;
    <table class="fullwidth"><tr>
    <td class="description" >
    Some pictures or textual description of what is on the right side.
    <td class="code">
    A very long message or source code line that should become scrollable and not cause
    the cell to become bigger...

3 answers


You would have to specify the width on the <pre> and not the <td>. Also, I have had issues with table and td widths before, so, if not absolutely necessary, you could try using <div> instead of table.

Answered almost 11 years ago by Divya Manian
  • You are right the whole stuff seems to behave quite differently, if it is put inside a table. I will analyze this deeper later (human beings have sometimes to sleep ;-) ... jdehaan almost 11 years ago

Divya is correct. A pre element will always try to be as wide as its content, and many browsers will ignore specified widths if these are exceeded by the width of the content. I would set width, height and overflow on the pre and float it left, doing away with the table altogether.

20% (less than 200px) does sound alarmingly small for viewing a sample of code in though - I think I would end up trying to select it all and copy it into an editor to read it.

Answered almost 11 years ago by Richard Grevers
  • The problem is that the table gets generated around the <pre> code (velocity engine) and I do not fully control it. However this is a really good hint, I will give up trying pointlessly to tell the browsers the width I want to have :-). The 20% is of course exaggerated to provoke clearly the problem I am experiencing. jdehaan almost 11 years ago
danwellman 5600

All you need to do is use the CSS style white-space:pre-wrap; on the <pre> element, this makes the two table cells become 80% and 20% of the page width.

I tested this and it seems to work perfectly in FF 3.5.3

Answered almost 11 years ago by danwellman
  • thank you, at least the width is now ok but it wraps instead of enabling the scrollbars (FF 3.5.3). In IE8 it doesn't work at all. jdehaan almost 11 years ago
  • you could try white:space:pre-line instead? danwellman almost 11 years ago
  • Thanks but did not work either, loose of indentation. The first idea was better. jdehaan almost 11 years ago
  • I discovered that giving the pre a fixed pixel width like 200px yields just what I want regarding scrolling behavior. But I want also to specify the width as a relative one! This seems to be quite tedious... Googled a lot again but no solution... jdehaan almost 11 years ago