I've been experimenting a bit and facing some challenges.
There are 6 divs with headings and lists. My goal is to align them as needed, with a maximum of 3 on any given line, creating layouts of 3x2, 2x3, or 6x1.
The main issue I'm encountering is getting the divs to have consistent heights.
Some problems I've encountered:
- I can't use
display:table-cellbecause it creates fixed rows. - Trying fixed heights leads to strange offsets, as shown in the second image.
I have set up a jsfiddle with the code, which is also provided below.
How can I (preferably using CSS only) make these divs have the same heights and widths while aligning them vertically correctly?
CSS (generated from LESS, excluding ul and h2 styling):
div div {
display:inline-block;
border:1px solid gray;
padding:5px;
margin:10px;
width:20%;
height:100%;
border-radius: 8px;
}
h2 {
margin:0px;padding:0px;
font-size:12pt;
text-align:center;
}
HTML:
<div id="homeFaq">
<div>
<h2>What is metadata?</h2>
<ul>
<li>Ipsum ipsum</li>
<li>Ipsum ipsum</li>
<li>Ipsum ipsum</li>
</ul>
</div>
<div>
<h2>What is [BRAND]?</h2>
<ul>
<li>Ipsum ipsum</li>
<li>Ipsum ipsum</li>
<li>Ipsum ipsum</li>
</ul>
</div>
<div>
<h2>How can I get data?</h2>
<ul>
<li>Ipsum ipsum</li>
<li>Ipsum ipsum</li>
<li>Ipsum ipsum</li>
</ul>
</div>
<div>
<h2>How can I add content?</h2>
<ul>
<li>Ipsum ipsum</li>
<li>Ipsum ipsum</li>
<li>Ipsum ipsum</li>
</ul>
</div>
<div>
<h2>Lorum Lorum?</h2>
<ul>
<li>Ipsum ipsum</li>
<li>Ipsum ipsum</li>
<li>Ipsum ipsum</li>
</ul>
</div>
<div>
<h2>Lorum Lorum?</h2>
<ul>
<li>Ipsum</li>
<li>Ipsum</li>
<li>Ipsum</li>
</ul>
</div>
</div>