Question 223201 in Html Question posted in
Some basic documentation can be found here.

Html – How to allow divs to be side by side, but overflow to be in a new row for vertical scrolling?

I’m building a cards kind of structure, and I’ve made a minimal example in a codepen here.

If that doesn’t work, here’s the HTML and CSS:

.my-div-container {
  width: 100%;
  height: 100%;
}

.my-div {
  border: solid #FF0000 5px;
  width: 200px;
  height: 200px;
  margin: 10px;
}
<!DOCTYPE html>
<head>
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <div class="my-div-container">
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
  </div>
</body>

What I want is for the my-div boxes to take up as much space there is horizonally, and then, when there are too many, to start a new line and start coming there. Kind of like how text works.

What I see now is that they are all vertically stacked. When I try something like putting display: inline-flex in the my-div-container, they are all squished together horizontally.

How can I allow them to behave like text?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0 

    .my-div-container {
  width: 100%;
  height: 100%;
}

.my-div {
  display: inline-block;
  border: solid #FF0000 5px;
  width: 200px;
  height: 200px;
  margin: 10px;
}
    <!DOCTYPE html>
<head>
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <div class="my-div-container">
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
  </div>
</body>

    Adding inline-block to the my-div CSS fixes the issue.


  2. 0

    You can use display:flex; with flex-wrap:wrap; (change the elements width and see that that will wrap)

    .my-div-container {
  width: 100%;
  height: 100%;
  display:flex;
  flex-wrap:wrap;
}

.my-div {
  border: solid #FF0000 5px;
  width: 200px;
  height: 200px;
  margin: 10px;
}
    <div class="my-div-container">
  <div class="my-div"></div>
  <div class="my-div"></div>
  <div class="my-div"></div>
  <div class="my-div"></div>
  <div class="my-div"></div>
  <div class="my-div"></div>
  <div class="my-div"></div>
  <div class="my-div"></div>
  <div class="my-div"></div>
  <div class="my-div"></div>
</div>
    Login or Signup to reply.
  3. 0

    flex is correct, but you also need to define flex-wrap: wrap; to tell it how it should wrap.

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/ is a really good guide for understanding flexbox, it visually explains the options with illustrations.

    .my-div-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.my-div {
  border: solid #FF0000 5px;
  width: 200px;
  height: 200px;
  margin: 10px;
}
    <!DOCTYPE html>
<head>
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <div class="my-div-container">
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
    <div class="my-div"></div>
  </div>
</body>

    Also if you can I recommend changing the size of the items to not have as much blank space.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search