CODEWITHSUNDEEP
csshtml
Andrew Plank
Andrew Plank

Reputation: 1007

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

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>

Upvotes: 0

Views: 1141

Answers (5)

souichiro
souichiro

Reputation: 181

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.

Upvotes: 0

Ria Weyprecht
Ria Weyprecht

Reputation: 1275

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:

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

Upvotes: 0

sandeep
sandeep

Reputation: 92813

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/

Upvotes: 1

Dean
Dean

Reputation: 6364

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/

Upvotes: 0

Veger
Veger

Reputation: 37915

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.

Upvotes: 2

Related Questions