CSS div element - how to show horizontal scroll bars only

Question

I have a div container and have defined its style as follows   div tbl-container        width  600px         overflow  auto          scrollbar-base-color  ffeaff     This gives me both horizontal and vertical scroll bars automatically once I populate my table which is contained by this div  I just want only horizontal scroll bars to appear automatically  I will modify the height of the table programmatically   How do I do this

User · Answer

We should set to overflow  auto and hide a scrollbar which we don t use for working on unsupporting CSS3 browser  Look at this CSS Overflow  XME im

User · Answer

you can also make it overflow  auto and give a maximum fixed height and width that way  when the text or whatever is in there  overflows it ll show only the required scrollbar

User · Answer

You shouldn t get both horizontal and vertical scrollbars unless you make the content large enough to require them   However you typically do in IE due to a bug  Check in other browsers  Firefox etc   to find out whether it is in fact only IE that is doing it   IE6-7  amongst other browsers  supports the proposed CSS3 extension to set scrollbars independently  which you could use to suppress the vertical scrollbar   overflow  auto  overflow-y  hidden    You may also need to add for IE8   -ms-overflow-y  hidden    as Microsoft are threatening to move all pre-CR-standard properties into their own    -ms    box in IE8 Standards Mode   This would have made sense if they d always done it that way  but is rather an inconvenience for everyone now    On the other hand it s entirely possible IE8 will have fixed the bug anyway

User · Answer

box-author-txt  width 596px  float left  padding 5px 0px 10px 10px   border 1px  dddddd solid  -moz-border-radius  0 0 5px 5px  -webkit-border-radius  0 0 5px 5px  -o-border-radius  0 0 5px 5px  border-radius  0 0 5px 5px  overflow-x  scroll  white-space  nowrap  overflow-y  hidden      box-author-txt ul  vertical-align top  height auto  display  inline-block  white-space  nowrap  margin 0 9px 0 0  padding 0px    box-author-txt ul li  list-style-type none   width 140px

User · Answer

I use the CSS properties   1   overflow-x  auto   2   overflow-y  hidden   3   white-space  nowrap    Don t forget to set a Width  both for the container and inner DIVS components  The property  white-space   nowrap  allows the inner DIVS not to drop on a different line   Considering the following HTML    lt div class  container  gt      lt div class  inner-1  gt  lt  div gt     lt div class  inner-2  gt  lt  div gt     lt div class  inner-3  gt  lt  div gt   lt  div gt    I use the following CSS to have an horizontal scroll only    container     height  80px    width  600px    overflow-x  auto    overflow-y  hidden     white-space  nowrap     inner-1  inner-2  inner-3     height  60px    max-width  250px   display  inline-block     this should fix it        Fiddle  https   jsfiddle net qrjh93x8   not working with the above code

User · Answer

you can also make it overflow  auto and give a maximum fixed height and width that way  when the text or whatever is in there  overflows it ll show only the required scrollbar

User · Answer

Use the following    lt div style  max-width 980px  overflow-x  scroll  white-space  nowrap   gt   lt table border  1  style  cellpadding 0  cellspacing 0  border 0  width  100     gt

User · Answer

This solution is without height width specification for the father div so it will be responsive to window resizing and most useful cause horizontal scrollbars appears just if needed    container      padding 20px      border dotted 1px      white-space nowrap      overflow-x auto      box      width 100px      height 180px      background-color  red      margin 10px      display inline-block     Take a look at DEMO

User · Answer

To show both    lt div style  height 250px  width 550px  overflow-x scroll   overflow-y  scroll  padding-bottom 10px   gt        lt  div gt    Hide X Axis     lt div style  height 250px  width 550px  overflow-x hidden  overflow-y  scroll  padding-bottom 10px   gt        lt  div gt    Hide Y Axis    lt div style  height 250px  width 550px  overflow-x scroll   overflow-y  hidden  padding-bottom 10px   gt        lt  div gt

User · Answer

To show both    lt div style  height 250px  width 550px  overflow-x scroll   overflow-y  scroll  padding-bottom 10px   gt        lt  div gt    Hide X Axis     lt div style  height 250px  width 550px  overflow-x hidden  overflow-y  scroll  padding-bottom 10px   gt        lt  div gt    Hide Y Axis    lt div style  height 250px  width 550px  overflow-x scroll   overflow-y  hidden  padding-bottom 10px   gt        lt  div gt

User · Answer

CSS3 has the overflow-x property  but I wouldn t expect great support for that  In CSS2 all you can do is set a general scroll policy and work your widths and heights not to mess them up

User · Answer

We should set to overflow  auto and hide a scrollbar which we don t use for working on unsupporting CSS3 browser  Look at this CSS Overflow  XME im

User · Answer

Use the following    lt div style  max-width 980px  overflow-x  scroll  white-space  nowrap   gt   lt table border  1  style  cellpadding 0  cellspacing 0  border 0  width  100     gt

User · Answer

This solution is without height width specification for the father div so it will be responsive to window resizing and most useful cause horizontal scrollbars appears just if needed    container      padding 20px      border dotted 1px      white-space nowrap      overflow-x auto      box      width 100px      height 180px      background-color  red      margin 10px      display inline-block     Take a look at DEMO

User · Answer

You shouldn t get both horizontal and vertical scrollbars unless you make the content large enough to require them   However you typically do in IE due to a bug  Check in other browsers  Firefox etc   to find out whether it is in fact only IE that is doing it   IE6-7  amongst other browsers  supports the proposed CSS3 extension to set scrollbars independently  which you could use to suppress the vertical scrollbar   overflow  auto  overflow-y  hidden    You may also need to add for IE8   -ms-overflow-y  hidden    as Microsoft are threatening to move all pre-CR-standard properties into their own    -ms    box in IE8 Standards Mode   This would have made sense if they d always done it that way  but is rather an inconvenience for everyone now    On the other hand it s entirely possible IE8 will have fixed the bug anyway

User · Answer

you can also make it overflow  auto and give a maximum fixed height and width that way  when the text or whatever is in there  overflows it ll show only the required scrollbar

User · Answer

I use the CSS properties   1   overflow-x  auto   2   overflow-y  hidden   3   white-space  nowrap    Don t forget to set a Width  both for the container and inner DIVS components  The property  white-space   nowrap  allows the inner DIVS not to drop on a different line   Considering the following HTML    lt div class  container  gt      lt div class  inner-1  gt  lt  div gt     lt div class  inner-2  gt  lt  div gt     lt div class  inner-3  gt  lt  div gt   lt  div gt    I use the following CSS to have an horizontal scroll only    container     height  80px    width  600px    overflow-x  auto    overflow-y  hidden     white-space  nowrap     inner-1  inner-2  inner-3     height  60px    max-width  250px   display  inline-block     this should fix it        Fiddle  https   jsfiddle net qrjh93x8   not working with the above code

User · Answer

CSS3 has the overflow-x property  but I wouldn t expect great support for that  In CSS2 all you can do is set a general scroll policy and work your widths and heights not to mess them up

User · Answer

I also had to add white-space  nowrap  to the style  otherwise elements would wrap down into the area that we re removing the ability to scroll to

User · Answer

CSS3 has the overflow-x property  but I wouldn t expect great support for that  In CSS2 all you can do is set a general scroll policy and work your widths and heights not to mess them up

User · Answer

box-author-txt  width 596px  float left  padding 5px 0px 10px 10px   border 1px  dddddd solid  -moz-border-radius  0 0 5px 5px  -webkit-border-radius  0 0 5px 5px  -o-border-radius  0 0 5px 5px  border-radius  0 0 5px 5px  overflow-x  scroll  white-space  nowrap  overflow-y  hidden      box-author-txt ul  vertical-align top  height auto  display  inline-block  white-space  nowrap  margin 0 9px 0 0  padding 0px    box-author-txt ul li  list-style-type none   width 140px

User · Answer

I also had to add white-space  nowrap  to the style  otherwise elements would wrap down into the area that we re removing the ability to scroll to

User · Answer

CSS3 has the overflow-x property  but I wouldn t expect great support for that  In CSS2 all you can do is set a general scroll policy and work your widths and heights not to mess them up

User · Answer

You shouldn t get both horizontal and vertical scrollbars unless you make the content large enough to require them   However you typically do in IE due to a bug  Check in other browsers  Firefox etc   to find out whether it is in fact only IE that is doing it   IE6-7  amongst other browsers  supports the proposed CSS3 extension to set scrollbars independently  which you could use to suppress the vertical scrollbar   overflow  auto  overflow-y  hidden    You may also need to add for IE8   -ms-overflow-y  hidden    as Microsoft are threatening to move all pre-CR-standard properties into their own    -ms    box in IE8 Standards Mode   This would have made sense if they d always done it that way  but is rather an inconvenience for everyone now    On the other hand it s entirely possible IE8 will have fixed the bug anyway

User · Answer

You shouldn t get both horizontal and vertical scrollbars unless you make the content large enough to require them   However you typically do in IE due to a bug  Check in other browsers  Firefox etc   to find out whether it is in fact only IE that is doing it   IE6-7  amongst other browsers  supports the proposed CSS3 extension to set scrollbars independently  which you could use to suppress the vertical scrollbar   overflow  auto  overflow-y  hidden    You may also need to add for IE8   -ms-overflow-y  hidden    as Microsoft are threatening to move all pre-CR-standard properties into their own    -ms    box in IE8 Standards Mode   This would have made sense if they d always done it that way  but is rather an inconvenience for everyone now    On the other hand it s entirely possible IE8 will have fixed the bug anyway

User · Answer

you can also make it overflow  auto and give a maximum fixed height and width that way  when the text or whatever is in there  overflows it ll show only the required scrollbar

[css] CSS div element - how to show horizontal scroll bars only?

Examples related to css

Examples related to html