CSS horizontal scroll (simple)

Question

Given:

        <div class="pageNavWrap">
            <a class="pageLink" href="#">1</a>
            <a class="pageLink" href="#">2</a>
            <a class="pageLink" href="#">3</a>
            <a class="pageLink" href="#">4</a>
            <a class="pageLink" href="#">5</a>
            <a class="pageLink" href="#">6</a>
            <a class="pageLink" href="#">7</a>
            <a class="pageLink" href="#">8</a>
            <a class="pageLink" href="#">9</a>
            <a class="pageLink" href="#">10</a>
            <a class="pageLink" href="#">11</a>
            <a class="pageLink" href="#">12</a>
            <a class="pageLink" href="#">13</a>
        </div>

With:

.pageNavWrap{
    background-color:#666;
    text-align:center;
    font-size:16px;
    overflow-x:scroll;
}
a.pageLink{
    color:White;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
}

How can I stop the links overflowing downwards? I would like them to overflow-x only (already specified in CSS) so that the horizontal scroll bar comes into play.

Cheers!

@sunn The div is occupying the remaining space available in it's container, this is not possible unfortunatly. — Tom Gullen
– Tom Gullen, Commented Feb 1, 2011 at 17:24

Noel Walters · Accepted Answer · 2011-02-01 17:25:51Z

2

you need to add

white-space:nowrap;

Browsers don't all seem to agree about inheritance on this attribute so try adding it to both css rules.

answered Feb 1, 2011 at 17:25

Noel Walters

1,8531 gold badge14 silver badges20 bronze badges

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

Comments

Kai Qing · Accepted Answer · 2011-02-01 17:21:08Z

0

have you tried adding display:inline to the a.pageLink class

answered Feb 1, 2011 at 17:21

Kai Qing

18.9k6 gold badges41 silver badges61 bronze badges

Comments

Bryan · Accepted Answer · 2011-02-01 17:26:42Z

0

Overflow-x might not be the best option as we are still waiting for all browsers to adopt all CSS3 features.

From a user experience point of view, do you really need the 13 (or more) pagination results? If you decide yes, then I would consider making your pagination results into a list and left-float the li's with a css declaration display:inline;

To force your list to always appear on one line, consider white-space:nowrap

answered Feb 1, 2011 at 17:26

Bryan

3471 silver badge10 bronze badges

Comments

zzzzBov · Accepted Answer · 2011-02-01 17:27:01Z

0

If you're not picky about browser compatibility:

.pageNavWrap
{
  display: table-row;
}
.pageLink
{
  display: table-cell;
}

and I was going to suggest white-space: nowrap; as well but @Noel Walters beat me to it.

answered Feb 1, 2011 at 17:27

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Collectives™ on Stack Overflow

CSS horizontal scroll (simple)

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related