CODEWITHSUNDEEP
htmlcss
user3223205
user3223205

Reputation:

set min-height on div but make all divs same height

I am using this CSS code:

<style type="text/css">
html,body {
    font-family:Arial;
}
.container {
    text-align:center;
}
.box {
    width:350px;
    display: inline-block;
    margin:10px 20px 0 auto;
    padding:10px;
    border:1px solid black;
    min-height:60px;
    font-size:60px;
    text-align: center;
}
.box h2 {
    font-size:40px;
    text-align:center;
}
</style>

but i want the divs to all have the same height

i have created a fiddle here: http://jsfiddle.net/UDm3a/

Upvotes: 2

Views: 1413

Answers (5)

jorgetutor
jorgetutor

Reputation: 460

Try this jQuery trick:

$(function() {
  $.fn.setAllToMaxHeight = function(){
    return this.height(
      Math.max.apply(this, $.map(this, function(e) { return $(e).height() }) )
    )
  }

  $('div.box').setAllToMaxHeight();
  //setTimeout("$('div.box').setAllToMaxHeight();", 10);
});

And CSS add:

.box {
   width:350px;
   display: inline-block;
   margin:10px 20px 0 auto;
   padding:10px;
   border:1px solid black;
   min-height:60px;
   font-size:60px;
   text-align: center;
   vertical-align: top;
}

Example: http://jsfiddle.net/UDm3a/7/

Upvotes: 1

SULTAN
SULTAN

Reputation: 1159

If I got you right, then there are several methods to accomplish what you need.

you can find them here: Fluid Width Equal Height Columns

They solve the problem like this:

enter image description here

to be like this:

enter image description here

you can see a D E M O here

and you can download the source files from here: DOWNLOAD FILES

Upvotes: 0

Abhishek Verma
Abhishek Verma

Reputation: 489

You can do this by decreasing the font-size and setting the min-width and max-width as same. Even though setting min-height might not be required but it worked for me.

CSS
html,body {
font-family:Arial;
}
.container {
text-align:center;
}
.box {
    display: inline-block;
padding:10px;
border:1px solid black;
text-align: center;
    font-size: 100%;
    padding: 10px;
    min-width: 300px;
    max-width: 300px;
}
.box h2 {
font-size:100%;
text-align:center;
}

You can see the fiddle here http://jsfiddle.net/abhishekverma3189/qvtWR/

Upvotes: 0

Shomz
Shomz

Reputation: 37701

To get the same offsets and heights, you need to float them and set the height.

float: left;
height: 300px;

Like the fiddle I gave you in the comments: http://jsfiddle.net/UDm3a/2/

The other option is to use vertical-align: top; along with height, so: 

vertical-align: top;
height: 300px;

See that here: http://jsfiddle.net/UDm3a/3/

If you want to set the height dynamically, I'm afraid you'll have to use JavaScript to find the highest on and apply its height to the others.

Upvotes: 0

fzzylogic
fzzylogic

Reputation: 2283

Use height, instead of min-height. e.g.:

height: 220px;

Upvotes: 0

Related Questions