HTML Div Width with Overflow: Auto?

Question

I'm creating a div like the following:

Edit: Here's an example:

<html>
  <body>
    <table>
      <tr>
        <td>
          <div style="position: relative; overflow: auto; max-height: 15em;">
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

The text of every label unnecessarily wraps to the next line.

How do I fix this?

Is it a viable option for you to just put a couple   on the end of the div to force it the extra couple of characters? — George Johnston
– George Johnston, Commented Jul 1, 2011 at 21:08
@George: I actually tried that, but it doesn't work -- it always overflows the characters that would be in place of the scrollbar. — user541686
– user541686, Commented Jul 1, 2011 at 21:29
@NGLN: Er... thanks, but that sort of beside the point. And yours doesn't do what I need: The width of your div is 100%, instead of being the same as that of the text. — user541686
– user541686, Commented Jul 1, 2011 at 22:03

tjm · Accepted Answer · 2011-07-02 23:19:32Z

7

Attempt 1

Add to the div,

white-space: nowrap;

The problem with this was the vertical scrollbar that appears impedes on the content slightly introducing a small unnecessary horizontal scrollbar.

Attempt 2

Add to the div,

white-space: nowrap;
padding-right: 1.5em;   // increase as appropriate

The problem here is that you're guessing the size of the vertical scrollbar to remove the horizontal one.

Attempt 3

Add to the div,

white-space: nowrap;
overflow-x: hidden; 
overflow-y: scroll;

Now, the horizontal scrollbar is removed, and the size of the vertical one is not being guessed, but it is always visible.

Attempt 4

The problem seems to boil down to needing to reserve the space for a scrollbar, as overflow-y: scroll; does but without it always being visible. The first solution that came to mind was to add an extra div alongside the first that has overflow-y: scroll; set and a width: 100%;. The problem was that with a regular div the scrollbar is included in the width. After some trial and error though, it seems that if you use a float it isn't. So by using an extra float you can force the width of the container to be larger by a scrollbars width, and then setting width: 100%; on the original div, it will take up the extra space too. You hide the extra float by setting it's height to 0.

N.B. I'm not entirely sure why this works myself, and I've only tested on Firefox5 where it seems to work. I hope it's helpful for you. So,

Add,

<div class="hack"></div>

below you're original div. Then,

.content {
    float: left;
    width: 100%;
    overflow-y: auto;
    max-height: 15em;
}

.hack {
    float: left;
    width: 100%;
    overflow-y: scroll;   
    height: 0;
}

An edit of your jsfiddle including this fix is here.

edited Jul 2, 2011 at 23:19

answered Jul 1, 2011 at 21:19

tjm

7,5502 gold badges34 silver badges55 bronze badges

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

13 Comments

user541686 Over a year ago

This is awesome! But now there's a small scrollbar on the bottom that scrolls for like 5 pixels. Any way to just make the thing bigger?

tjm Over a year ago

@Mehrdad. I still think I've missed the point. I thought it was a vertical scrollbar that was the problem. This method will still leave a horizontal one. I'll reread again and keep thinking.

user541686 Over a year ago

No, the vertical scrollbar is the problem! But once I prevent whitespace wrapping, a horizontal one appears.

user541686 Over a year ago

@max: Yes, I want it to be there, but it's the cause of the wrapping problem. I want it to be there, but to make the box bigger when it appears, so that it doesn't take up text room.

tjm Over a year ago

@Mehrdad Well, this has been driving me nuts ever since you asked it! I was sure there had to be another way. You've probably already decided what you're going to use by now, but I've come up with a new solution. See my update (Attempt 4). You may well consider it even more hacky than the others. But if it works at all(!) I think it will work for scrollbars of unknown widths. Let me know how you get on.

|

Austin Brunkhorst · Accepted Answer · 2011-07-01 21:46:55Z

1

From what i see, you need just the vertical scroll bar. This should should do the trick.

overflow-x: hidden;

answered Jul 1, 2011 at 21:46

Austin Brunkhorst

21.1k6 gold badges49 silver badges61 bronze badges

Comments

NGLN · Accepted Answer · 2011-07-01 23:13:11Z

1

You can enforce a vertical scrollbar with overflow-y: scroll;.

Edit:

Oké, finally I think it's clear what you want.

See this demo fiddle.

CSS:

div {
    overflow: auto;
    max-height: 15em;
    display: inline-block;
}

HTML:

<div>
    <input type="checkbox" id="check" />
    <label for="check">Some text.</label>
</div>

Edit 2:

Ok, maybe this is what you want? I hope you don't mind the extra padding if there are just a few lines in the div.

edited Jul 1, 2011 at 23:13

answered Jul 1, 2011 at 22:04

NGLN

43.7k8 gold badges115 silver badges213 bronze badges

7 Comments

user541686 Over a year ago

Yes, but my text still wraps that way. I need the width to auto-size to the text.

user541686 Over a year ago

Take a look at this example to see what I mean... it doesn't seem to work that way either.

NGLN Over a year ago

@Mehrdad Pffiew. Ok, updated again... ;-) I hope you don't mind the padding in the case there are just a few lines.

user541686 Over a year ago

I don't mind the padding itself, but I do mind the fact that you're assuming that a scrollbar has a certain width. That's hacky... :\

NGLN Over a year ago

@Mehrdad Agreed, but see no other way. Just pick the widest from all browsers (there likely is some limit). The alternative seems to enforce the scrollbar always.

|

Collectives™ on Stack Overflow

HTML Div Width with Overflow: Auto?

Edit: Here's an example:

3 Answers 3

13 Comments

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Edit: Here's an example:

3 Answers 3

13 Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related