Martin Martin - 6 months ago 18
HTML Question

CSS width rule for inner div that has dynamic content

I have two divs, an outer div and an inner div inside it. I've set the outer div to have a fixed width (505px) with

overflow-x: scroll
.

My inner div contains floated left dynamic content (meaning there could be one div or 100) and so could have a width of anywhere between 50px to 5000px. I'm trying to style the inner div so that it can accommodate the dynamic content all on one line but it's not behaving like that; it's hitting the 505px and moving down to the next line. If I give it a width of 5000px, obviously it's working, but the content could be much less than that. What am I doing wrong?



#outer-div {
width: 505px;
height: 100%;
float: left;
background-color: #fff;
overflow-x: scroll;
overflow-y: hidden;
}

#inner-div {
width: auto;
display: inline;
}

.dynamic-content {
width: 62px;
height: 100%;
font-size: 13px;
text-align: center;
float: left;
}

<div id = "outer-div">
<div id = "inner-div">
<div class = "dynamic-content"></div>
<div class = "dynamic-content"></div>
<div class = "dynamic-content"></div>
etc...
</div>
</div>




Answer

It's not a width setting..you need to stop the line breaks with white-space:nowrap

#outer-div {
  width: 505px;
  height: 100%;
  float: left;
  background-color: #fff;
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid grey;
  white-space: nowrap;
}
.dynamic-content {
  height: 100%;
  font-size: 13px;
  text-align: center;
  display: inline-block;
}
<div id="outer-div">

  <div class="dynamic-content">AAAAAAAAAAAAA</div>
  <div class="dynamic-content">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
  <div class="dynamic-content">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
  etc...
</div>