Settings a border around several divs

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 table instead 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/