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 over 8 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 over 8 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 over 8 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 over 8 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 over 8 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 over 8 years ago
  • you could try white:space:pre-line instead? danwellman over 8 years ago
  • Thanks but did not work either, loose of indentation. The first idea was better. jdehaan over 8 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 over 8 years ago