CSS DIV as table - how to make all column same height as the highest

I have some problems with my DIV table.. maybe there is a better way to do this.

I want to have all columns to be the same height as the highest column. Is there a way to do it? or is there another way to make this work ?

I have to made a jsfiddle example here with my code: http://jsfiddle.net/rb500o4L/ (right column is higher than left, middle and the logo column.)

My CSS code:

div.round-border {
border: solid 1px;
border-color: #002F67;
border-radius: 10px;
}  

#container {
display: table;
width: 100%;
}

#row  {
display: table-row;
}

#cell {
display: table-cell;
}

#cell-logo {
display: table-cell;
width: 200px;
}

My HTML code:

<div id="container">
<div id="row">

<div id="cell">
    <div class="round-border">
        <h4>Left Col</h4>
        <p>...</p>
    </div>
</div>

<div id="cell">
    <div class="round-border">      
        <h4>Middle Col</h4>
        <p>...</p>
    </div>  
</div>

<div id="cell">
    <div class="round-border">      
        <h4>Right Col</h4>
        <p>...</p>
        <p>...</p>
    </div>
</div>

<div id="cell-logo">
    <div class="round-border">
        <h4>LOGO AREA</h4>
        <p>...</p>
    </div>
</div>

</div>
</div>

I appreciate any recommendation, thank you

Answers


use this css

div.round-border {
border: solid 1px;
border-color: #002F67;
border-radius: 10px;
  }  

 container {

width: 100%;
}

 row  {

height:auto;


 }

  #cell 

 {
height:auto;
min-height:400px;
width:50px;
  display:inline-block;

  }

 #cell-logo {

  width: 50px;
  }

What you are trying to achieve is Faux Columns

So there are a few ways too achieve what you want. You can check here for more info, plus check demos here

in this links above you will find these ways to achieve what you asking:

  • Doug Neiner Method (Five Columns)
  • Doug Neiner Method (Three Columns, Dif Widths, Source Order Altered)
  • CSS Table
  • Actual Table
  • Nicolas Gallagher Method
  • One True Layout Method

Based on your example I used the CSS TABLE solution, which is similar to the code already exists .

#css-table {
  display: table;
}
#css-table .col {
  display: table-cell;
  padding: 10px;
  width: 25%;
}
#css-table .col:nth-child(2n) {
  background: none repeat scroll 0 0 #ccc;
}
#css-table .col:nth-child(2n+1) {
  background: none repeat scroll 0 0 #eee;
}
<div id="css-table">
  <div class="col">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
  <div class="col">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
  <div class="col">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
  <div class="col">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
</div>

Need Your Help

Is it possible to use a micro-benchmark framework to only time some statements?

java microbenchmark caliper jmh

I am planning to micro benchmark my java code which involves several calls to local as well as remote database. I was about to use System.nanoTime() but started reading about the micro benchmarking

How do i change a list element's value in a for loop in python?

python list elements

I am having a bit of trouble changing the values of list elements when utilizing a for loop. The following code outputs 10 and 5 - but I'm expecting 10 and 10.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.