user3396867 user3396867 - 6 months ago 17
Javascript Question

make inner div wider than the outer div

I have two divs. The name of the outer div is scroll_main and the inner div is scroll_holder . the width of the outer div is 750px and overflow is set to auto. In the inner div I have added some div with a fixed width and height and float left. so I want to make the width of the inner div auto so that all the contain div of the inner section show in one row. I want to scroll from left to right. Is it possible? thanks

here is the html

<div class="scroll_main">
<div class="scroll_holder">
<div style="width:400px; height:400px; background:#333; float:left; margin:10px"></div>
<div style="width:400px; height:400px; background:#999; float:left;margin:10px"></div>
<div style="width:400px; height:400px; background:#ccc; float:left;margin:10px"></div>
<div style="width:400px; height:400px; background:#22b1b5; float:left;margin:10px"></div>
<div style="width:400px; height:400px; background:#333; float:left; margin:10px"></div>
<div style="width:400px; height:400px; background:#999; float:left;margin:10px"></div>
</div>
</div>


here is the css I have tried to apply

.scroll_main {
height: 450px;
margin: 0 auto;
max-width: 97%;
overflow: auto;
position:relative;

width:750px
}
.scroll_holder{overflow:hidden; margin:5px; width:750px; overflow:auto }

Answer

CSS

.scroll_main {
  height:450px;
  margin:0 auto;
  max-width:97%;
  overflow:auto;
  position:relative;
  width:750px
}
 .scroll_holder{
   margin:5px;
   white-space:nowrap;
 }
.scroll_holder div {
  float:none !important;
  display:inline-block;
}

Codepen Example