CSS issue with a "middle" div that won't wrap around its content

Question

Here (and below) you can see an issue with a "middle" div that won't wrap its content. I'm trying to get it to automatically wrap the entire content of the table, so there's a neat white 10 pixel padded border all the way round. I've tried everything I can think of, playing with display modes, floats, clears, overflows... But nothing seems to work. Can anyone see where I'm going wrong?

#outer {
    height : 200px;
    width : 200px;
    background : red;
    overflow : auto;
    padding : 10px;
}
#middle {
    background : white;
    padding : 10px;
}
#inner {
    border : 1px solid purple;
}
td {
    background : cyan;
    padding : 5px;
    border : 1px solid blue;
}

<div id="outer">
  <div id="middle">
    <table id="inner">
      <tr>
        <td>this is some random text</td>
        <td>this is some random text</td>
        <td>this is some random text</td>
        <td>this is some random text</td>
      </tr>
    </table>
  </div>
</div>

No, that's not the issue. In the production code, the table has an arbitrary number of cells depending on how many fields a particular record has. Some have, like, 30 fields. Changing the font size isn't an option, and I'm not sure if you're trolling or not... Also, the text content of each cell is set to nowrap, and is truncated and ellipsified at 20 characters max. — Andrew Plank, Jan 24 '13 at 09:01

score 2 · Accepted Answer · edited May 23 '17 at 12:04

2

Add

display:inline-block;

to the #middle definition.

What is the difference between display: inline and display: inline-block? provides some more details about the inline-block property value.

See this updated fiddle.

edited May 23 '17 at 12:04

Community

1
1

answered Jan 24 '13 at 09:00

Veger

37,240
11
105
116

Yes! Thankyou! That is exactly what I was looking for. Quite how I overlooked that option I don't know. – Andrew Plank Jan 24 '13 at 09:08

score 1 · Answer 2 · answered Jan 24 '13 at 09:04

1

You can use table-layout:fixed. Write like this:

#inner {
            border : 1px solid purple;
            table-layout: fixed;
            width: 100%;
        }

Check this http://jsfiddle.net/nCe8k/10/

answered Jan 24 '13 at 09:04

sandeep

91,313
23
137
155

score 0 · Answer 3 · answered Jan 24 '13 at 09:01

There is no way around this if you want the parent container to be a fixed size with no overflowing. Table's aren't flexible in this regard, and they have a minimum size, so by default it extends outside the bounds of the parent container. You'll need to make the parent container bigger.

    #outer {
        height : 200px;
        width : 300px;
        background : red;
        overflow : auto;
        padding : 10px;
    }

See here: http://jsfiddle.net/tMaCv/

souichiro · Answer 4 · 2013-01-24T09:11:06.790

0

Otherwise, you need to tell the #inner, that it has the width of #outer minus value of the paddings (in your example 20px).

But if you want to display something, you should think about making the #outer bigger and keep track of the size of the 's.

edited Jan 24 '13 at 09:11

answered Jan 24 '13 at 09:03

souichiro

181
1
1
8

score 0 · Answer 5 · answered Jan 24 '13 at 09:06

The problem with tables is that they always try to show their whole content. 4 times the word "random" next to each other needs more than 200px space. But this doesn't make the parent element resize. There are actually 4 solutions for this:

Use js and calculate the actual width of your table
Use a wider table (if possible) :-)
use overflow:hidden so that it at least doesn't mess up you layout
use min-width insetad of width for the outer element

CSS issue with a "middle" div that won't wrap around its content

5 Answers5