Divs in one line with overflowed parent

Question

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;
}

Answer 1

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>