CODEWITHSUNDEEP
htmlcss
humodz
humodz

Reputation: 602

Prevent container from wrapping, make its children wrap instead

My layout looks something like this:

<div class="left">
    ...
</div>

<div class="right">
    <div class="inner" />
    ... a bunch of these ...
    <div class="inner" />
</div>

CSS:

div { display: inline-block; }
.left { width: 25%; }
.right { width: 75%; }
.inner { width: 33%; }

I want to do the following:

When the screen is at normal size:

+--+-----+
|  |O O O|
|  |O O O|
+--+-----+

What I want to happen when I reduce the browser's width:

+--+---+
|  |O O|
|  |O O|
|  |O O|
+--+---+

What actually happens:

+--+
|  |
|  |
+--+
+-----+
|O O O|
|O O O|
+-----+

And if I shrink the browser even further: (I also want to avoid this)

+--+
|  |
|  |
+--+
+---+
|O O|
|O O|
|O O|
+---+

Is this doable?

Upvotes: 0

Views: 58

Answers (2)

Mike Tung
Mike Tung

Reputation: 4821

Yes you can do it with flexbox.

html

<div class="parent">
  <div class="left">Some Stuff</div>
  <div class="right">Some other stuff</div>
</div>

css

.parent {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.left, .right {
  flex: 1 1 auto;
  border-color: black;
  height: 100%;
  width: 100%;
}

.left{
  background-color: red;
}
.right{
  background-color: blue;
}

working code pen here https://codepen.io/seekheart/pen/BRNrER

Upvotes: 0

Kakashi Hatake
Kakashi Hatake

Reputation: 3036

This would give you a better result i hope.

div {
  display: inline-block;
  margin: 0 auto;
}

.left {
  width: 25%;
  float: left;
}

.right {
  width: 75%;
  float: right;
}

.inner {
  width: 33%;
}
<div class="left">
  ...
</div>

<div class="right">
  <div class="inner" /> ... a bunch of these ...
  <div class="inner" />
</div>

Upvotes: 3

Related Questions