CODEWITHSUNDEEP
htmlcss
Carol.Kar
Carol.Kar

Reputation: 5345

Settings a border around several divs

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:

enter image description here

I would like to let it look like that:

enter image description here

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!

Upvotes: 0

Views: 120

Answers (3)

Simon H&#228;nisch
Simon H&#228;nisch

Reputation: 4958

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.

Upvotes: 1

Edmundo Santos
Edmundo Santos

Reputation: 8287

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/

Upvotes: 0

Johannes
Johannes

Reputation: 67738

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.

Upvotes: 1

Related Questions