CSS: Wrapping Divs

Question

I have a CSS menu using the checkbox:checked trick here

But my issue is that when the menu is open, the content overflows off the side of the parent div - How do I make the divs fluid so that that wrap around to the next row and push each other along?

I have looked at Flexible Boxes, I have never used them before, but feel this could be the right track.

I have created a JSFiddle that illustrates what I am trying to do.

Thank you :)

EDIT

I've done some experimenting and it is the magic combination of padding and box-sizing - I've also just stumbled upon this useful post => International box-sizing Awareness Day

EDIT

HTML:

<div id="content">
<input type="checkbox" />
  <div id="container">
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
  </div>
</div>

CSS:

#content {
  width: 500px;
  background: blue;
}
  input[type="checkbox"]:checked ~ #container {
    transition: left 1s;
    left: 250px;
    }

#container {
  position: relative;
  transition: left 1s;
  left: 0px;
  width: 100%;
}

.item {
  display: inline-block;
  width: 50px;
  background: red;
  margin: 4px;
}

I think you have to use margin instead of `left` https://jsfiddle.net/6tcyerLn/2/ — Nenad Vracar, Jan 29 '16 at 11:17
As well as the padding-left:250px rather than "left", you do not need the width on id container either. — Jamie Paterson, Jan 29 '16 at 12:35

score 1 · Answer 1 · answered Jan 29 '16 at 11:25

The problem is that you're moving the whole container so everything inside it moves too.

What you actually want to do is move the first .item.

input[type="checkbox"]:checked ~ #container .item:first-child {
  transition: margin-left 1s;
  margin-left: 250px;
}

#content {
  width: 500px;
  background: blue;
}
input[type="checkbox"]:checked ~ #container .item:first-child {
  transition: margin-left 1s;
  margin-left: 250px;
}
#container {
  position: relative;
}
.item {
  display: inline-block;
  width: 50px;
  background: red;
  margin: 4px;
}

<div id="content">

  <input type="checkbox" />

  <div id="container">

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

  </div>
</div>

This is really great, thanks - But I want the divs to line up, I want the three divs that wrap to the start of the container (0px) to wrap to the first element (250px) — Luke T O'Brien, Jan 29 '16 at 11:33

score 1 · Accepted Answer · answered Jan 29 '16 at 11:25

The problem is that you are moving the left value of offset menu, which moves the menu item to left 250px. Similar thing will occur if you use margin-left property, because of width:100%.

instead, if you increase the padding, which will cause the increment inwards and reduce width of parent container, causing the item elements to fall on next life if no space is found.

Check the below snippet, where i am changing the padding value

* {
  box-sizing: border-box;
}
#content {
  width: 500px;
  background: blue;
}
input[type="checkbox"]:checked ~ #container {
  transition: padding 1s;
  padding-left: 250px;
}
#container {
  position: relative;
  transition: padding 1s;
  left: 0px;
  width: 100%;
  padding-left: 0;
}
.item {
  display: inline-block;
  width: 50px;
  background: red;
  margin: 4px;
}

<div id="content">

  <input type="checkbox" />

  <div id="container">

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

  </div>
</div>

@Deepak_Yadav Fantastic that's the answer! CSS is wondeful – Luke T O'Brien Jan 29 '16 at 11:37 — Luke T O'Brien, Jan 29 '16 at 11:37

score 0 · Answer 3 · answered Jan 29 '16 at 11:35

As per your JSFiddle example you have to change few properties :

HTML : one line has to added for clear the floating

<div id="content">

<input type="checkbox" />

  <div id="container">

    <div class="item">
    Hello
    </div>

    <div class="item">
Hello
    </div>

    <div class="item">
Hello
    </div>

    <div class="item">
Hello
    </div>

    <div class="item">
Hello
    </div>

    <div class="item">
Hello
    </div>

    <div class="item">
Hello
    </div>
    <div style="clear:both"></div>

  </div>
</div>

And the CSS would be :

#content {
  width: 500px;
  background: blue;
}
  input[type="checkbox"]:checked ~ #container {
    transition: margin-left 1s;
    margin-left: 250px;
    }

#container {
  position: relative;
  transition: margin-left 1s;
  margin-left: 0px;
}

.item {
  display: inline-block;
  width: 50px;
  background: red;
  margin: 4px;
}

CSS: Wrapping Divs

3 Answers3