Creating a box within a box, kinda

HTML-CSS
1

Hi guys,

As seen here with the pricing boxes, how do I get that grey border at the top of the box? I’ve tried ‘inspecting’ the elements but can’t see anything.

I’m assuming it’s not actually a box but a background-color applied to the title text.

I already have 3x boxes aligned with flex-box.

Thank you.

2

Hello,

You are right, if you inspect the element you will realize that the titles are in a <div> with class of level and its have CSS kinda looks like this:

background-color: #ddd;
padding: 15px 0;

here in this case, the background-color property with its value #ddd is giving that color, and the padding property with their values are making it look like a box.

3

Thank you. Flex-box seems to be making it rather difficult. It obviously flexes all the boxes inside. Would I have to make use of ‘align-self’ or is there another way?

edit I think I got it below. I guess my error was positioning .shopbox one using justify/align which placed any content in the middle (or wherever I aligned it too)

#shop-container {
  display: flex;
  height: 30vh;
  width: 50vw;
  margin: auto;
  
}

.shopboxone {
  display: flex;
  flex: 1 1 auto;
  height: 20px;
  background-color: red;
}
1 Like