-1

Please look at the example below. I'm trying to put my yellow div under red div and on the left side of bottom half of green. If i use clear: left it will jump down, but it lefts empty space above. I want it to fill this space.

Here's example: https://jsfiddle.net/enqqr2w8/

Arthi
  • 1

1 Answers1

0

#redyellow
{
 width: 100px;
 height: 200px;
 float: left;
}
#red
{
 width: 100px;
 height: 100px;
 background-color: red;
 float: left;
}
#green
{
 width: 100px;
 height: 200px;
 background-color: green;
 float: left;
}
#blue
{
 width: 100px;
 height: 100px;
 background-color: blue;
 float: left;
}
#yellow
{
 width: 100px;
 height: 100px;
 background-color: yellow;
 float: left;
}
body
{
 width: 300px;
}
<body>
  <div id="redyellow">
  <div id="red">
 aa
 </div>
  <div id="yellow">
 aa
 </div>
  </div>
 <div id="green">
 aa
 </div>
 <div id="blue">
 aa
 </div>
</body>

Does this work for you?

EDIT: I have found a way to make dynamic columns with only CSS3:

div
{
  width: 100px;
  height: 100px;
  break-inside: avoid-column;
}
#red {
 background-color: red;
}
#green
{
 height: 200px;
 background-color: green;
}
#blue
{
 background-color: blue;
}
#yellow
{
 background-color: yellow;
}
#orange
{
 background-color: orange;
}
#black
{
 background-color: black;
}
body
{
  width: 300px;
  columns: 3;
}
<body>
 <div id="red"></div>
    <div id="yellow"></div>
 <div id="green"></div>
 <div id="blue"></div>
    <div id="orange"></div>
</body>

Sources: 1, 2, 3, 4

StardustGogeta
  • 3,331
  • 2
  • 18
  • 32
  • Thanks for quick reply. Unfortunatelly i can't do it like that. Im actually printing this divs with php loop (cant use ajax or jquery plugins such as Masonry) so im not able to do 'columns' like yours. Its like yellow div is 4 in order and 5th have to be under blue one. – Arthi Sep 04 '16 at 17:14
  • @Arthi What are you talking about? This uses no jQuery or AJAX, only one extra element and CSS definition. – StardustGogeta Sep 04 '16 at 17:16
  • @Arthi Okay, I see what you are saying, I will try to think of something else. – StardustGogeta Sep 04 '16 at 17:17
  • @Arthi How does it look now? I added an extra orange block to show what it would look like. – StardustGogeta Sep 04 '16 at 18:01