CODEWITHSUNDEEP
htmlcssoverflow
Ihor Patychenko
Ihor Patychenko

Reputation: 196

Divs in one line with overflowed parent

Having one parent div with width:70px and overflow-x:hidden I want to add 2 children div with width:50px in one line, such that a second div will has 20px of visible part, and 30px hidden by parent node. Here what I tried to do:

HTML:

<div id="parent">
    <div id="first"></div>
    <div id="second"></div>
</div>

CSS:

#parent{
    width:70px;
    height:50px;
    overflow-x:hidden;
}
#first{
    width:50px;
    height:50px;
    background-color:#aeaeae;
    display:inline-block;
}
#second{
    width:50px;
    height:50px;
    background-color:#CC0A0A;
    display:inline-block;
}

Upvotes: 1

Views: 627

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99464

You could add white-space: nowrap to the #parent so that inline-level children do not wrap to a new line.

Also note that there's a whitespace between inline-level elements in inline flow, you could remove that by:

  • removing spaces/tabs/newlines in the markup ...</div><div>....
  • Commenting the spaces/tabs/newlines in the markup <!-- -->.
  • Setting the font-size of the parent to 0 and re-setting it back to 16px on children
  • and...

#parent{
  width:70px;
  height:50px;
  overflow-x:hidden;
  white-space: nowrap;
}

#first{
  width:50px;
  height:50px;
  background-color:#aeaeae;
  display:inline-block;
}

#second{
  width:50px;
  height:50px;
  background-color:#CC0A0A;
  display:inline-block;
}
<div id="parent">
    <div id="first">First element</div><div id="second">Second element</div>
</div>

Upvotes: 2

Related Questions