Positioning of borders using css

HTML-CSS
1

Hi, I have a hard time understaning borders using css. So I want to create 3 borders next to each other (horizontally). Then I need to include some text and an image to each of one. Of course, the text and the images should be nested in have to be placed in center.
My code so far:

#small-ball,
#medium-ball,
#high-ball {
  border: 1px solid black;
  border-radius: 5px;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  width: calc(100% / 3);
  max-padding: 10px;
  flex-direction: column;
  display: block;
}

Can someone please help me?

2

I think we really need to see your entire project in order to help you.

I’m not sure what this means.

3

Yep, this is my whole code I’m currently working: https://codepen.io/patri22k/pen/vYWYJPZ . I want to create something similar to this: https://codepen.io/patri22k/pen/bGYGaoa?editors=1100, where the whole borders are next to each other :slight_smile:

4

Just to be clear, you want to place the <div>s side-by-side, not the borders. Borders are part of the div, but you want to move the divs themselves.

I would take a look at the CSS flexbox layout.

5

Btw the web…it’s an insight joke. I really had no idea what to create, so please do not try to understand what is the content there.

6

Learning flexbox might take a bit of time but it (and CSS grid) is well worth the time. Look at YouTube for some tutorials as well.

Here is an example with some comments.

#balls {
  /* puts the elements on one line */
  display: flex;
  
  /* lets the elements wrap to a new line */
  flex-wrap: wrap;
  
  /* center the wrapping */
  justify-content: center;
  
  /* add space between the elements */
  gap: 2rem;
  
  /* same as max-width and width */
  width: min(980px, 90vw);
  
  /* center the container */
  margin: auto;
}
7

I GOT IT!!! After looking at yours explanations, I finally understand where I have had mistakes. Here is the solution:

#small-ball,
#medium-ball,
#high-ball {
  border: 1px solid black;
  border-radius: 5px;
  width: calc(100% / 4);
  margin: auto;
}

#balls {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

Thank you for helping me and I guess see ya in another problem haha

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.