CODEWITHSUNDEEP
htmlcss
Benoit
Benoit

Reputation: 39064

Table with pre overflows proportional div

I'm trying to create a simple (ha) two column layout, where the first column is variable width and the 2nd column is fixed size.

The first column contains a table which works fine except if the td element contains a pre block. In that case, the pre block extends to the 2nd column.

Here is a simple example:

<div class="content">
  <div id="Left">
    <table id="q-table">
      <tr><td>
        <div class="q">
           <p>This is some paragraph that will be fairly long and wrap.</p>
           <pre>This is a very long pre tag that causes headaches.</p>
        </div>
        <div>
            <p>Causes problems if I make class q position: absolute</p>
        </div>
      </td></tr>
     </table>
   </div>
   <div id="Right">
     <p>This is a paragraph on the right with fixed width</p>
   </div>
</div>

Here is the CSS style I'm using for this example:

.content {
    width: 95%;
    position: relative;
}
#Left {
    width: 50%;
    float: left;
}
#Right {
    float: right;
    width: 200px;
}
#q-table {
    width: 99%;
}
.q {
    overflow: auto;
    width: 99%
}

If I make the .q class position: absolute then the horizontal flow mostly behaves like I want, but the following div section moves up and messes the vertical alignment.

The pre tag is the culprit. Removing it causes the correct behavior. Unfortunately, pre tags are a necessity.

Think of a StackOverflow layout where a question with code would show up with the scrollbars on a small screen, but if I have a large monitor, the question area would extend and the scrollbars would disappear.

Anyone have any ideas?
Does CSS provide support for what I'd like to do?

Upvotes: 0

Views: 622

Answers (2)

Benoit
Benoit

Reputation: 39064

I have come to the conclusion that it is simply not possible to provide the behavior described.

I believe the problem is that the table and the tags conflict with each other.
The table does not enforce the proportional spacing directive when one of the cell element uses a pre tag.

Upvotes: 0

Jason McCreary
Jason McCreary

Reputation: 72991

This may not provide the desired result. But you can adjust the white-space property instead.

For example, setting it to normal will make it behave like, say, a p tag:

pre {
  white-space: normal;
}

See it in action - http://jsfiddle.net/az85F/

Otherwise, set the width and overflow properties. That's what this very forum does for code samples. A quick example - http://jsfiddle.net/mj6Nh/1/

Upvotes: 2

Related Questions