Question

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/

Answer 1

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.