Float div inside and container and scroll

Hi all

I have a jsfiddle here - https://jsfiddle.net/0fjd2mpr/11/

It’s a containing div with and number of div inside that are floated left.

I would like the floated div’s to be on one line and go out the right of the containing div and then be able to scroll the contents.

I have this working in the first ‘red’ example. Here I have set width on a container inside the containing div “results-header”

The bottom example ‘green’ dosen’t have this width set and the floated div’s are contained within the containing div.

Is the top ‘red’ example the only way to do this if so how can I do this without setting a width on the div’s container “results-header”, the div’s will be added dynamically so I’m not going to know this width.

Don’t use floats but use display:inline-block instead and set white-space to nowrap and the boxes will stay in one line.

e.g.


.header{
  border: 1px solid red;
  padding: 5px;
  overflow: scroll;
  width: 400px;
  height: 100px;
  white-space:nowrap;
  font-size:0;/* white-space fix*/
}
.result-item{
  background: red;
  height: 20px;
  /*float: left;*/
  display:inline-block;
  width:100px;
  white-space:normal;
  font-size:16px;
  font-size:1rem;/* reset font-size*/
  margin: 0 2px 2px 0;
}

Or if modern browsers support is needed you could use flexbox.

.header{
  border: 1px solid red;
  padding: 5px;
  overflow: scroll;
  width: 400px;
  height: 100px;
}
.results-header{
    display:flex;
}
.result-item{
  background: red;
  height: 20px;
  margin: 0 2px 2px 0;
}
.width-10{
  width: 100px;
  flex:1 0 100px;
}
2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.