sameer manek sameer manek - 5 months ago 10
CSS Question

CSS: can't make all the links scroll horizontally running out the page width

I am trying to make a horizontal scroll of all the links in the page, I have made them float horizontally but cannot make them scroll as the max-width of body is set to 100% (and it is necessary due to other elements of page!).

here is the markup:

<div class="header">
<div class="filters">
<a data-filter="*">All</a>
<a data-filters=".anim">animals</a>
<a data-filters=".benc">benches and sofa</a>
<a data-filters=".colu">columns and pillars</a>
<a data-filters=".entr">entry gates</a>
<a data-filters=".fire">fire places</a>
<a data-filters=".flow">flower pot</a>
<a data-filters=".foun">fountain</a>
<a data-filters=".gaze">gazebo</a>
<a data-filters=".jaal">jaalis and grills</a>
<a data-filters=".ligh">light lamps</a>
<a data-filters=".natu">natural planters</a>
<a data-filters=".stat">statues</a>
<a data-filters=".wash">wash basins</a>
</div>
</div>


and her is the css:

.header{
height: 180px;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.header .filters{
background-color: whitesmoke;
position: fixed;
width:auto;
margin-top: 130px;
max-height: 50px;
z-index: 1000;
overflow-x: scroll;
overflow-y: hidden;
padding: 17px 10px;
white-space: nowrap;
}

.header .filters a{
margin: 0 10px;
font-family: LatoWebLight;
font-size: 16px;
width: 150%;
cursor: pointer;
}


Also providing a JSfiddle for the same if you need!

I only need elements inside this div scrolling and not All the elements and the entire page!

Thanks for all the help :)

Answer

You had width: auto on the .filter element, which make the element grow with content and not create a scroll. I changed it to width: 100% and now it does scroll.

I also added box-sizing: border-box; to make the padding: 17px 10px; value be counted within the width.

html, body {
  margin: 0;
}
.header{
  height: 180px;
  width: 100%;
}
.header .filters {
  background-color: whitesmoke;
  position: fixed;
  width:100%;
  margin-top: 130px;
  max-height: 50px;
  z-index: 1000;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 17px 10px;
  white-space: nowrap;
  box-sizing: border-box;
}

.header .filters a{
  margin: 0 10px;
  font-family: LatoWebLight;
  font-size: 16px;
  width: 150%;
  cursor: pointer;
}
<div class="header">
  <div class="filters">
    <a data-filter="*">All</a>
    <a data-filters=".anim">animals</a>
    <a data-filters=".benc">benches and sofa</a>
    <a data-filters=".colu">columns and pillars</a>
    <a data-filters=".entr">entry gates</a>
    <a data-filters=".fire">fire places</a>
    <a data-filters=".flow">flower pot</a>
    <a data-filters=".foun">fountain</a>
    <a data-filters=".gaze">gazebo</a>
    <a data-filters=".jaal">jaalis and grills</a>
    <a data-filters=".ligh">light lamps</a>
    <a data-filters=".natu">natural planters</a>
    <a data-filters=".stat">statues</a>
    <a data-filters=".wash">wash basins</a>
  </div>
</div>

Comments