CODEWITHSUNDEEP
htmlcss
Abhijith Nagaraja
Abhijith Nagaraja

Reputation: 3380

Horizontal scroll for a div which contains other div

I am trying to build a 3 divs in a single row

Left and Right divs contains a single image of size 35px. Middle div contains many other divs with a horizontal scroll

Left(35px) middle(not a fixed width, with horizontal scroll) right(35px)

Here is the fiddle. http://jsfiddle.net/zddm6asz/5/

<div class="wrapper">
 <div>
 left
 <div>

 <div>
   <div> .... </div>
   <div> .... </div>
   <div> .... </div>
   ....
 </div>

 <div>
 Right
 </div>

</div>

I tried so much but still unable to do this. Any help would be appreciated

EDIT

This is not responsive design. Middle div should occupy remain space in the row.

Left and right div are always at fixed width. In this case both are set to 35px;

Upvotes: 0

Views: 750

Answers (1)

xWaZzo
xWaZzo

Reputation: 758

When you are using floats, you need to set a width to make them work.

.middle {
  height: 100%;
  width: 80%; /* Width is important for floats. */
  float: left;
  overflow: scroll; /* Allow scroll */
  white-space: nowrap; /* This will create the magic for the horizontal scroll */
}

.middleInner{
  display: inline-block; /* No float needed for inner elements */ 
}

JSFiddle here

Upvotes: 2

Related Questions