Reputation:
I've tried a bit and am having trouble with this.
I have 6 div
s with headings and lists. Ideally, I'd like to have these line up as required, with a maximum of 3 one any one line, so the potential layouts are either 3x2, 2x3 or 6x1.
The problem I've having at the moment is that I can't get the divs to match their heights correctly.
Issues I've had:
display:table-cell
as this means I have fixed rows.I've got a jsfiddle setup with the code but its below as well.
div
s to have identical heights and widths, while lining up vertically correctly?CSS (generated from LESS, sans 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>
Upvotes: 1
Views: 1136
Reputation: 2853
You can use fix height and vertical align top as below
div div {
display:inline-block;
border:1px solid gray;
padding:5px;
margin:10px;
width:20%;
height:150px;
border-radius: 8px;
vertical-align:top;
};
Upvotes: 1
Reputation: 1894
updated js fiddle :http://jsfiddle.net/nikhilvkd/VNcaH/4/
You can use min-height
value in your h2
and ul
tags.it will be fine working fine !!!
div div h2 {
min-height: 30px;
}
div div ul {
min-height:80px;
}
Upvotes: 1