user764357
user764357

Reputation:

Make multiple divs of equal height when they aren't always on the same line

I've tried a bit and am having trouble with this.

I have 6 divs 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:

I've got a jsfiddle setup with the code but its below as well.

How can I (preferably with CSS only) get these divs 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>

2 rows of 3 with unequal heights

2 rows of 3 with unequal heights

2 rows of 4 and 2 still unequal heights

3 rows of 2 with more unequal heights

http://jsfiddle.net/VNcaH/

Upvotes: 1

Views: 1136

Answers (2)

Rakesh Kumar
Rakesh Kumar

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;
};

Fiddle Demo

Upvotes: 1

Krish
Krish

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

Related Questions