CODEWITHSUNDEEP
htmlcss
Derik
Derik

Reputation: 843

DIV same height as parent

So, I have two DIVs, being that the second one has variable content. I need the first DIV to have the same height as the second one, and the text on it to be vertically centered. I've found several pages with similar examples, but I haven't found a good way of doing it. Thanks in advance!

~like this: http://jsfiddle.net/a8LjU/4/

Upvotes: 0

Views: 2324

Answers (2)

TheZ
TheZ

Reputation: 3732

Using the css display properties of table and table-cell can work, but it's not supported across all browsers like IE7 and below.

I've updated your example with the changes: http://jsfiddle.net/a8LjU/5/

An alternative is using intermediary divs and the method can be found here: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Upvotes: 1

L0j1k
L0j1k

Reputation: 12625

page.css:

<div class="container">
<div class="first">
  TEXT TEXT TEXT TEXT TEXT
</div>
<div class="second">
  TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT         
</div>
</div>​

default.css:

body{
  height:100%;
}
html{
  height:100%;
}

.container{
  float:left;
  height:100%;
}

.first, .second{
  float:left;
  background:#00C8FF;
  height:100%;
  width:50px;
}

.second{
  background:#006EFF;
}

Bear in mind that this will put the height of both at the height of the containing page. There's not really a pretty way of doing this.

Upvotes: 1

Related Questions