Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make 3 "li" columns with variable height content the same height

HTML:

<ul>
  <li>
    <div class="one">Variable Height Title</div>
    <div class="two">Fixed height middle block</div>
    <div class="three">Variable height middle block<br />more content<br /> more contentmore content<br /> more content<br /> more content</div>
    <div class="four">Fixed height footer</div>
  </li>
  <li>
    <div class="one">Variable Height Title Might be two lines long</div>
    <div class="two">Fixed height middle block</div>
    <div class="three">Variable height middle block</div>
    <div class="four">Fixed height footer</div>
  </li>
  <li>
    <div class="one">Variable Height Title</div>
    <div class="two">Fixed height middle block</div>
    <div class="three">Variable height middle block</div>
    <div class="four">Fixed height footer</div>
  </li>  
</ul>

CSS:

li {
  float:left;
  width:33%;
}

.one, .three {
  background-color:blue;
}
.two, .four {
  background-color:green;
}

Please look at this example: http://jsfiddle.net/WffHD/

Is there a way with css only to make the "one" divs equal height (which must be dynamic), and then also make all three columns equal height based on the tallest one as well? Another way of putting it: I want all "one" divs to be equal height, and then all columns should also be equal height by stretching the height of the "three" div. Unfortunately they must stay as li items due to a plugin I am using. I think this could be accomplished fairly easy with javascript but am looking for a css solution if possible. (Caveat, needs to work in IE7) Hope that makes sense and thanks!

like image 557
Westwick Avatar asked Jan 09 '13 23:01

Westwick


People also ask

How do you make equal height Li in CSS?

Adding class ="frame-height" to all li elements, make all li elements the same height as the highest li element.

How do I make one DIV the same height as another?

Basically what you do is make both divs/columns very tall by adding a padding-bottom: 100% and then "trick the browser" into thinking they aren't that tall using margin-bottom: -100% . It is better explained by Ed Eliot on his blog, which also includes many examples.

How do you make two divs float the same height?

Answer: Use the CSS3 flexbox With CSS3 flex layout model you can very easily create the equal height columns or <div> elements that are aligned side by side. Just apply the display property with the value flex on the container element and the flex property with the value 1 on child elements.

How do I keep two side by side DIV elements the same width?

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.


2 Answers

For IE7?

And Pure CSS?

And All Row 1 (Div "one") Equal Height?

And all Columns Equal Height?

The answer is... Not possible.

like image 83
ScottS Avatar answered Oct 23 '22 21:10

ScottS


With great difficulty, or with JavaScript.

This is actually one of the things Flex Box Layout was designed for. So you would have something like this:

#mylist {
    display: flex;
    flex-flow: row wrap;
}
#mylist>li {
    flex: 1 1 100%;
}

And it should give all the elements the same height. See the full Flex Box Layout specification for more options.

Just make sure you have the appropriate vendor prefixes, and you're good to go.

like image 36
Niet the Dark Absol Avatar answered Oct 23 '22 21:10

Niet the Dark Absol