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


Tags: html,css,table

Problem :

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



Solution :

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

    CSS Howto..

    how to create circle image wrapper

    How can these images to fit on the screen?

    How to avoid double borders on list of divs

    How to group CSS colors

    how can i add a css file to body of a page?

    How to calculate total size of all css,js and html pages separately uing shell script?

    Javascript/CSS slideshow: Using transparencies highlights flaws I don't know how to fix

    Window resize shifts buttons to the bottom of the page. How to fix the css in this page?

    How to flip background image using CSS?

    How to use a custom toggle switch in jquery mobile

    How to make my popup window dead center no matter what width it is

    How to increase or decrease space between two lines in same paragraph?

    How to align an icon to the right of content

    How to add hover effect to using CKEditor?
    Here is a script to highlight columns where there is checkmarks with an orange background-color. var CKE = $( '.editor' ); CKE.ckeditor(); var columnIndex=0; $("#update").click(function(){ // Output CKEditor's result in...
    Read more

    How can I create a full height responsive horizontal scrolling list of images with CSS

    How to call JavaScript on change of CSS

    HTML emails in 2013: How to control spacing between elements like paragraphs and images?

    How do I align my navbar so it's permanently in the middle of my white box (without padding etc)?

    How hard is it to master semantic markup and good CSS?

    How to put things in divs with true border

    How did Blizzard achieve the layered cockpit view for the Starcraft II website?

    How to scale a div without scaling content

    How do I fix my css floats on IE 6 & 7? Or how can I lay this out better?

    How to detect when one or more JS/CSS library fail to load (e.g. CDN)?

    How to set background-size to “cover”, plus a little more in CSS?

    How to include a font .ttf using CSS?

    How to print on a specific paper

    How to insert the number into the bottom right of each page by TWIG and CSS

    CSS Less changes not showing. Compile or IIS error?

    How to make 1 css value dependent on another?