CODEWITHSUNDEEP
htmlcss
Elfayer
Elfayer

Reputation: 4561

How to align div first left then top in div parent?

This might seem dumb, but I can't figure out how to do this using CSS.

I want to align all the inside divs on the left side, and when it goes out to restart from the top.

So in the following example from the cyan div (included), divs should display on a second column starting at the top again.

Is this achievable ?

#container {
  height: 300px;
  width: 300px;
  background-color: lightgray;
}
.element {
  height: 60px;
  width: 60px;
  margin: 2px;
}
<div id="container">
  <div class="element" style="background-color: red;"></div>
  <div class="element" style="background-color: orange;"></div>
  <div class="element" style="background-color: yellow;"></div>
  <div class="element" style="background-color: pink;"></div>
  <div class="element" style="background-color: cyan;"></div>
  <div class="element" style="background-color: blue;"></div>
  <div class="element" style="background-color: green;"></div>
  <div class="element" style="background-color: lightgreen;"></div>
</div>

Upvotes: 2

Views: 43

Answers (2)

Cedric Reichenbach
Cedric Reichenbach

Reputation: 9319

The most obvious but boring answer would be to use a flexbox.

However, you could also be punk and do it with fancy geometry: Make them float right and rotate everything by 90 degree.

Of course, to have contents oriented correctly, you need to rotate them to the opposite direction.

#container {
  height: 300px;
  width: 300px;
  background-color: lightgray;
  transform: rotate(-90deg);
}
.element {
  height: 60px;
  width: 60px;
  margin: 2px;
  float: right;
  position: relative;
}
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 0.5em;
  transform: rotate(90deg);
}
<div id="container">
  <div class="element" style="background-color: red;"><div class="text">Hello,</div></div>
  <div class="element" style="background-color: orange;"><div class="text">is</div></div>
  <div class="element" style="background-color: yellow;"><div class="text">it</div></div>
  <div class="element" style="background-color: pink;"><div class="text">me</div></div>
  <div class="element" style="background-color: cyan;"><div class="text">you</div></div>
  <div class="element" style="background-color: blue;"><div class="text">are</div></div>
  <div class="element" style="background-color: green;"><div class="text">looking</div></div>
  <div class="element" style="background-color: lightgreen;"><div class="text">for?</div></div>
</div>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115240

Yes, using flexbox

#container {
    height: 300px;
    width: 300px;
    background-color: lightgray;
    display: flex;
    flex-direction: column;
    flex-wrap:wrap;
    align-content:flex-start;
}
.element {
    height: 60px;
    width: 60px;
    margin: 2px;
}
<div id="container">
    <div class="element" style="background-color: red;"></div>
    <div class="element" style="background-color: orange;"></div>
    <div class="element" style="background-color: yellow;"></div>
    <div class="element" style="background-color: pink;"></div>
    <div class="element" style="background-color: cyan;"></div>
    <div class="element" style="background-color: blue;"></div>
    <div class="element" style="background-color: green;"></div>
    <div class="element" style="background-color: lightgreen;"></div>
</div>

Upvotes: 4

Related Questions