Menu
I have a variable number of divs, which should be displayed on two lines, as follows
[1] [3] [5] [7]
[2] [4] [6] ...
I looked at the column-count property, however it's not exactly what I need, as it fixes the number of columns, whereas in my case it should be dynamic. (what I need would be a similar line-count property, which doesn't seeem to exist).
Is there a pure CSS solution, or should I make container divs for every groups of 2 vertical divs?
Thanks,
Edit :
Here is a simplified code of my case. Actually, As I set the height property on my container div, shouldn't the article divs be stacked by at most 2 ? Now they're overflowing the container.
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="container">
<div class="article">A</div>
<div class="article">B</div>
<div class="article">C</div>
<div class="article">D</div>
<div class="article">E</div>
</div>
</body>
</html>
and the CSS
.article {
width:50px;
height:50px;
border:1px gray dashed;
margin:1px;
}
.container {
height:110px;
max-height:110px;
}
However with this code all the article divs are in one column.
819
Using CSS media queries You can create two columns simply by creating a two-column table and then using classes to have the columns stack. The block class turns the table cells into blocks on mobile, and the content behaves accordingly and automatically stacks on mobile. This results in a normal stack.
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).
Using CSS position property: The position: absolute; property is used to position any element at the absolute position and this property can be used to stack elements on top of each other. Using this, any element can be positioned anywhere regardless of the position of other elements.
You can use the columns css property on a container:
#columns-holder {
-moz-columns: 100px;
-webkit-columns: 100px;
columns: 100px;
-moz-column-gap: 15px;
-webkit-column-gap: 15px;
column-gap: 15px;
}
.box {
width: 100px;
height: 100px;
margin-bottom: 15px;
background: grey;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}<div id="columns-holder">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
