How do I make a div extend its width beyond the parent's width?

Question

I have a wrapper div and a content div.

<style type="text/css">
    #wrapper {
        width: 500px;
        border: 1px solid red;
        overflow: auto;
    }

    #content {
        border: 1px solid blue;
    }

    .column {
        display: inline-block;
        width: 300px;
    }
</style>

<div id="wrapper">
    <div id="content">
        <div class="column">hello</div>
        <div class="column">world</div>
    </div>
</div>

The column s appear on two rows instead of the same row. If I style then with display: table-cell they each take up 50% of the width, but still won't expand the content beyond the wrapper 's width.

How do I make the content div expand to fit both column s on the same row and cause scrolling on the wrapper div?

Answer 1

Ohh I think I see the problem now, try:

#wrapper {
    width: 500px;
    border: 1px solid red;
    overflow: auto;
}

#content {
    white-space:nowrap;
    border: 1px solid blue;
}

.column {
    display: inline-block;
    width: 300px;
}

http://jsfiddle.net/krowe/z3TS8/

Answer 2

if you change you styles to the following you will achieve what you want:

#wrapper {
    width: 500px;
    border: 1px solid red;
    overflow: auto;
}

#content {
    display: inline-block;
    border: 1px solid blue;
    white-space:nowrap;
}

.column {
    vertical-align:top;
    display: inline-block;
    width: 300px;
    white-space:normal;
}

Example

Answer 3

In .column if you use display:table-cell, the column will be aligned in the same row as you need. And its working fine for me. Hope this is what you are looking for JSFiddle

 #wrapper {
      width: 500px;
      border: 1px solid red;
      overflow: auto;
      display:table;
  }
  #content {
      overflow: hidden;
      display:table-row;
  }
  .column {
      width:50%;
      border: 1px solid blue;
      display:table-cell;
  }