CODEWITHSUNDEEP
htmlcss
Filipe Merker
Filipe Merker

Reputation: 2446

Is there a way, othen than inline-block, for elements to don't break line?

I have elements wrapped into a parent div, and they're all floated to left. The parent element has overflow: scroll and when the parent become thinner than the children, i don't want the children to break line, but the parent to overflow them horizontally.

I've discovered that i can do this by using: display: inline-block for the children to behave text-like and then, set the parent to white-space: nowrap. This way, they will not break.

But i want a solution with the children floated. Can someone help me?

Working example

HTML

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

.parent{
  padding: 3px;
  width: 100%;
  height: 200px;
  background-color: green;
  overflow: scroll;

  /*does the trick*/
  white-space: nowrap;
}
.child{
  display: inline-block;
  height: 190px;
  width: 80px;
  background-color: gray;
  margin-left: 10px;
}

[edit] - Since Paulie asked in the comments, i've got to say that no, they don't have to be floated for working. I know this. But I want to know if there is another way to accomplish that and I think that there is no better place for this but the SO community

Upvotes: 2

Views: 146

Answers (2)

Asons
Asons

Reputation: 87191

display: table does do that too, though flex is a more appropriate way to do layout than table, unless you need it to work on for example IE8/9, which flex doesn't, but then again, your inline-block is more appropriate than table

.parent{
  padding: 3px;
  max-width: 100%;
  height: 200px;
  background-color: green;
  overflow: scroll;
  display: table;  
}
.child{
  display: table-cell;  
  height: 190px;
  min-width: 80px;
  background-color: gray;
  padding-left: 10px;
  border: 1px solid white
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115010

Flexbox can do that and it doesn't even need the white-space:nowrap.

.parent {
  padding: 3px;
  height: 200px;
  background-color: green;
  overflow: auto; /* or scroll */
  display: flex;
}
.child {
  height: 190px;
  flex: 0 0 80px;
  background-color: gray;
  margin-left: 10px;

}

.parent {
  padding: 3px;
  height: 100px;
  background-color: green;
  overflow: scroll;
  display: flex;
}
.child {
  height: 90px;
  flex: 0 0 80px;
  background-color: gray;
  margin-left: 10px;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

JSfiddle Demo

Upvotes: 4

Related Questions