How to inline a child div with another child div? - html

Question

I have tried float, display inline-block. Flex does work but I cant use flex as it will inline every single child div and I dont want that. I basically want few boxes in the left and one box on the right that auto size the height accordingly with the height size of the child divs from the left. I have tried floating boxChildRight to the right/left vice verse and its not working.
HTML
#sp {
position: absolute;
left: 400px;
top: 0;
}
#box {
width: 100%;
height: auto;
margin-top: 20px;
}
.boxChildRight {
right: 0;
width: 20%;
height: auto;
border: 1px solid;
position: relative;
float: right;
}
.boxChildLeft {
left: 0;
width: 80%;
height: 100px;
border: 1px solid;
margin-bottom: 2px;
position: relative;
float: left;
}
.prodInfo {
float: left;
margin-left: 10px;
}
.img {
margin-left: 0;
float: left;
}
<div id="box"> PARENT DIV
<div class="boxChildLeft"> CHILD
<div class="img">
<img src="../shopImages/candles.jpg" width="100px" height="100px">
</div>
<div class="prodInfo">
<p1>Test</p1><br>
<span id="sp"><p1>Test</p1></span>
</div>
</div>
<div class="boxChildLeft">
<div class="img">
<img src="../shopImages/candles.jpg" width="100px" height="100px">
</div>
<div class="prodInfo">
<p1>Test</p1><br>
<span id="sp"><p1>Test</p1></span>
</div>
</div>
<div class="boxChildLeft">
<div class="img">
<img src="../shopImages/candles.jpg" width="100px" height="100px">
</div>
<div class="prodInfo">
<p1>Test</p1><br>
<span id="sp"><p1>Test</p1></span>
</div>
</div>
<div class="boxChildLeft">
<div class="img">
<img src="../shopImages/candles.jpg" width="100px" height="100px">
</div>
<div class="prodInfo">
<p1>Test</p1><br>
<span id="sp"><p1>Test</p1></span>
</div>
</div>
<div class="boxChildRight"> THIS CHILD DIV SHOULD BE ON RIGHT SIDE OF ALL OTHER DIVS
</div>
</div>

Answer 1

You can use position:absolute;
*{
box-sizing:border-box; /* Added */
}
#sp {
position: absolute;
left: 400px;
top: 0;
}
#box {
width: 100%;
height: auto;
margin-top: 20px;
position:relative; /* Added */
padding-right:20%; /* Added */
float:left; /* Added */
}
.boxChildRight {
width: 20%;
height: 100%; /* Updated */
border: 1px solid;
position:absolute; /* Added */
right:0; /* Added */
top:0; /* Added */
}
.boxChildLeft {
left: 0;
width: 80%;
height: 100px;
border: 1px solid;
margin-bottom: 2px;
position: relative;
float: left;
}
.prodInfo {
float: left;
margin-left: 10px;
}
.img {
margin-left: 0;
float: left;
}
<div id="box"> PARENT DIV
<div class="boxChildLeft"> CHILD
<div class="img">
<img src="../shopImages/candles.jpg" width="100px" height="100px">
</div>
<div class="prodInfo">
<p1>Test</p1><br>
<span id="sp"><p1>Test</p1></span>
</div>
</div>
<div class="boxChildLeft">
<div class="img">
<img src="../shopImages/candles.jpg" width="100px" height="100px">
</div>
<div class="prodInfo">
<p1>Test</p1><br>
<span id="sp"><p1>Test</p1></span>
</div>
</div>
<div class="boxChildLeft">
<div class="img">
<img src="../shopImages/candles.jpg" width="100px" height="100px">
</div>
<div class="prodInfo">
<p1>Test</p1><br>
<span id="sp"><p1>Test</p1></span>
</div>
</div>
<div class="boxChildLeft">
<div class="img">
<img src="../shopImages/candles.jpg" width="100px" height="100px">
</div>
<div class="prodInfo">
<p1>Test</p1><br>
<span id="sp"><p1>Test</p1></span>
</div>
</div>
<div class="boxChildRight"> THIS CHILD DIV SHOULD BE ON RIGHT SIDE OF ALL OTHER DIVS
</div>
</div>
Updated on your comment
box-sizing
In CSS, by default, the width and height you assign to an element is
applied only to the element's content box. If the element has any
border or padding, this is then added to the width and height to
arrive at the size of the box that's rendered on the screen. This
means that when you set width and height you have to adjust the value
you give to allow for any border or padding that may be added. This is
especially tricky when implementing a responsive design.
MDN

Answer 2

Your problem is that although the divs are set to 80% and 20% - that does not include the border.
In order to include the border width within the overall width calculated for your elements, simply add:
* {
box-sizing: border-box;
}
for your CSS. This way, each element will take the border property in concideration when calculating the element's width.

Answer 3

I think using position is not a good solution we can do without using position absolute.
Agree with
* {
box-sizing: border-box;
}
This code is without using position absolute property:-
https://jsfiddle.net/oceh7f9q/