Link to home
Start Free TrialLog in
Avatar of tonelm54
tonelm54

asked on

Float to overflow

Im trying to make a kinda Excel like sheets tab at the bottom of one of my pages, however I cant get the tabs to flow on one line to allow overflow to work correctly, instead it seems to wrap the divs onto the next line:-
User generated image
Ive put my code on a jsFiddle to show you what I have got soo far
https://jsfiddle.net/gLu58tdw/

Any ideas how I can flow my tabs across instead of it wrapping?

Thanks in advance
Avatar of tonelm54
tonelm54

ASKER

I noticed the jsFiddle link isnt working for some reason. Its https://jsfiddle.net/gLu58tdw/
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image
Hey there,

You should try with a display: inline-block instead of float. Add in a nowrap to the whitespace and you'll be heading in the right direction:

  #divTabs {
    height: 45px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
  }

  .divTab {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    border-left: 1px solid grey;
  }

Open in new window

Here's a working demo - https://jsfiddle.net/ChrisStanyon/14zkfd85/
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.