Settings a border around several divs - html

Question

I am trying to make a product summary box for the following page:
I was playing around to set the border on the following divs:
<div style="border:1px solid black;" class="inner">
<div style="padding-bottom: 14px;border:1px solid black;" class="title">
The result looks like the following:
I would like to let it look like that:
Any suggestions how to set the divs properly? Or would it be better to design a backgroud image to fit the box?
I appreciate your replies!

Answer 1

You could use a tableinstead of DIVs whose cell borders you make visible.
Or use display: table , display: table-row and display: table-cell for the DIVs, again defining a border for the cell elements.

Answer 2

This is a 5-minute CSS solution:
* {
box-sizing: border-box;
font-family: sans-serif;
}
.product {
border: 2px solid #999;
border-radius: 2px;
width: 20em;
}
.product--header,
.product--image,
.product--rating {
width: 100%;
border-bottom: 2px solid #999;
}
.product--header h2, .product--header h3 {
text-align: center;
padding: 0.25em 0 0.5em;
margin: 0;
}
.product--image img {
width: 100%;
padding: 0.25em;
z-index: 1;
}
.product--image {
position: relative;
}
.product--pricetag {
position: absolute;
z-index: 2;
left: 0;
top: 1em;
color: white;
background: rgba(0, 0, 0, 0.75);
text-align: center;
width: 40%;
padding: 0.5em;
}
.product--rating p {
text-align: center;
}
.product--links {
width: 100%;
margin: 0.5em;
}
.product--links a.btn {
display: block;
color: white;
background: blue;
text-align: center;
width: 90%;
margin-left: 2.5%;
padding: 0.5em;
margin-bottom: 0.25em;
}
<div class="product">
<div class="product--header">
<h2>Test Product</h2>
<h3>Price Class: $$ | P3 | 14</h3>
</div>
<div class="product--image">
<img src="http://placekitten.com/200/200" alt="cat">
<p class="product--pricetag">
999 $
</p>
</div>
<div class="product--rating">
<p>Rating: 4/5</p>
</div>
<p class="product--links">
<a class="btn">Buy on Amazon</a>
<a class="btn">Other Sizes</a>
</p>
</div>
I wouldn't recommend a background frame image, because it's a pain to work with and loading it is a waste of bandwidth.

Answer 3

Put four borders on the container, then just add border-bottom in each child, except on the last.
.container-bordered {
border: 2px solid red;
}
.container-bordered > div:not(:last-of-type) {
border-bottom: 2px solid red;
}
https://jsfiddle.net/cqjxuype/