How to make child elements flow outside of parent? - html

Question

Currently I have an html file with DOM structure like this:
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
And I want to have a layout like this: the "child" divs float outside the parent, lining up like table cells in the same row, each child has bigger width and smaller height than the parent, and they child divs will cover up the bottom of the parent div.(I cannot post picture yet, so I can only describe it), this has to be done without changing the DOM structure.
I tried to make the child elements inline blocks and float left, but they just seem to keep piling up, is there a way to achieve it without changing the DOM?

Answer 1

You could use absolute positioning instead:
#parent{
height:300px; width:300px; position:relative;
}
.child{
height:100px; width:300px; position:absolute;
}
.child:first-child{
left:-50px;
}
Of course, this is only part of the CSS you need.

Answer 2

I'd recommend using flex instead:
display: flex
It's more responsive than using
display: block
position: absolute
HTML:
<div id="parent">
<div class="child">hi</div>
<div class="child">hello</div>
<div class="child">hey</div>
</div>
CSS:
#parent {
display: flex;
flex-direction: row;
width: 400px;
}
.child {
flex-grow: 1;
height: 30px;
text-align: center;
color: white;
}
.child:nth-of-type(1) {
background:red;
}
.child:nth-of-type(2) {
background: green;
}
.child:nth-of-type(3) {
background: purple;
}
Here's a sample from jsfiddle:
https://jsfiddle.net/pbu05aaL/