using overflow in css

Question

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.

just FYI you don't need div in front of #a or #b or #c whenever you are declaring styles for ID's. You can simply have #a{}, #b{}, #c{} in most cases. — klewis
– klewis, Commented Mar 11, 2013 at 3:22
If you want #c always under #a and #b, then remove the float:left property in #c and instead use clear:both; — klewis
– klewis, Commented Mar 11, 2013 at 3:24
The width of the first 2 parent div containers should fit the size of your content. You can visually know that by adding a border:solid 1px #000; to the first two styles. — klewis
– klewis, Commented Mar 11, 2013 at 3:27
I'm not sure if this can be achieved with pure css. Though I'm happy to be proved wrong. Is javascript a viable option? — Jon P
– Jon P, Commented Mar 11, 2013 at 3:35
i have clarified question. @blachawk Thanks for the css syntax tips. — Mark
– Mark, Commented Mar 11, 2013 at 3:46

Alexander Wallin · Accepted Answer · 2013-03-11 04:05:48Z

3

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.

edited Mar 11, 2013 at 4:05

answered Mar 11, 2013 at 3:52

Alexander Wallin

1,41411 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alexander Wallin Over a year ago

Sorry, forgot the scrollable feature. Be back soon.

klewis Over a year ago

Nice job afEkenholm, you beat me to it

Jon P Over a year ago

Very happy to be proven wrong with my comment in the question

Hass · Accepted Answer · 2013-03-11 03:27:17Z

2

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.

answered Mar 11, 2013 at 3:27

Hass

1,6361 gold badge18 silver badges31 bronze badges

2 Comments

Mark Over a year ago

Not quite what i had in mind, I need only the 3rd div to be scrollable, I have clarified the question. Thanks for the css tip!

Hass Over a year ago

You're welcome. Have you tried adding a min-width to #c? Oh and you should also add a width to the parent.

klewis · Accepted Answer · 2013-03-11 04:30:40Z

0

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).

edited Mar 11, 2013 at 4:30

answered Mar 11, 2013 at 3:54

klewis

8,54816 gold badges70 silver badges113 bronze badges

2 Comments

Jon P Over a year ago

Fiddle not working (html in script box) and I believe "c" should be on the same line as "a" & "b"

Mark Over a year ago

@blachawk, thanks, but i need the content box to be side by side, not on top of each other.

Collectives™ on Stack Overflow

using overflow in css

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related