CODEWITHSUNDEEP
csshtmlscrollbaroverflow
Mark
Mark

Reputation: 402

using overflow in css

How can i set the width of the first 2 divs to be dynamic (fit the contents width), while the 3rd div should use remaining horizontal space and be horizontally scrollable.

The result i need is that all 3 divs sit side by side and the 3rd div is hoziontally scrollable.

Script i have is as follows

HTML

<div id="a">
  <table>
    <tr><td>text</td></tr>
  </table>
</div>
<div id="b">
  <table>
    <tr><td>text</td></tr>
  </table>
</div>
<div id="c">
  <table>
    <tr><td>text</td></tr>
  </table>
</div>

CSS

div#a
{
float: left;
}
div#b
{
float: left;
}
div#c
{
float: left;
width: 100%;
overflow-x: scroll;
}

The above script pushes div3 to the next line, which i dont want.

Upvotes: 2

Views: 204

Answers (3)

klewis
klewis

Reputation: 8379

The CSS...

  #a {
float:left;
border:solid 1px #000;
width:33%;
}   

#b {
float:left;
border:solid 1px #000;
width:33%;
}

#c {
float:left;
border:solid 1px #000;
width:33%;
}

.scroll{
float:left;
overflow:auto;
width:100%;
}

.content {
width:1000px;
overflow:auto;
}

And the HTML...

<div id="a">
This is text within my first content box
</div>

<div id="b">
This is text within my second content box 
</div>

<div id="c">
<div class="scroll-content">
This is text within my third content box and this is horizontal and scrollable
</div>
</div>

UPDATED JSFIDDLE LINK BELOW AGAIN!!!

And a demo on jsfiddle - http://jsfiddle.net/GeLqV/1/

Mark, this will work for you now. I now see that you wanted all three divs on the same row, and the last one being able to horizontally scroll. Look at my jsfiddle demo. No matter what your screen size will be, all three div's are fluid in size and will stay together (for the most part).

Upvotes: 0

Alexander Wallin
Alexander Wallin

Reputation: 1394

If you float #a and #b to the left, #c will fill the rest of the parent's width.

To get #c horizontally scrollable, you style its content container as:

#c .scroll-content {

    /* You shouldn't do this on a table, but rather on a wrapping container. */
    display: inline-block;
    white-space: nowrap;
    overflow: auto;
    overflow-y: hidden;
}

I made an example at JSFiddle.

Upvotes: 3

Hass
Hass

Reputation: 1636

You should set a parent div to hold them all together in the same row. Something like this instead should work.

<div id="parent">

<div id="a">
  <table>
    <tr><td>text</td></tr>
  </table>
</div>
<div id="b">
  <table>
    <tr><td>text</td></tr>
  </table>
</div>
<div id="c">
  <table>
    <tr><td>text</td></tr>
  </table>
</div>

</div>


div#a
{
float: left;
}
div#b
{
float: left;
}
div#c
{
float: left;
}

#parent{
width: 100%;
overflow-x: scroll;
}

Also you might want to refactor your code. Since all of the divs are floating left, you might want to use just one class that floats to the left. I hope this helps.

Upvotes: 2

Related Questions