CODEWITHSUNDEEP
jqueryhtmlcss
aslum
aslum

Reputation: 12264

finding div height problem and changing margins commensurately

The various content DIVs show up in a slideshow style (I'm using Malsup's Cycle plugin) a single one at a time, but have differing heights (individually, and at different times the largest height may be different). The news div has the height of the highest content DIV. I would like to center the content DIVs vertically within the news DIV. Is there a simple way to do this with CSS? Or should I use jquery to calculate the height of newsWrapper, subtract the newsNav heights, and news from it, halve that and then add it as margin-top for each of the content DIVs?

<div id="newsWrapper">
  <div id="newsNavTop">
  </div>
  <div id="news">
    <div>Content1</div>
    <div>Content2</div>
    <div>Content etc...</div>
  </div>
  <div id="newsNavBottom">
  </div>
</div>

Upvotes: 0

Views: 102

Answers (2)

seler
seler

Reputation: 9193

you can try displaying this as table.

#news {
    display: table-cell;
    vertical-align: middle;
}

#news > div {
    display: block;
}

http://jsfiddle.net/seler/P23DJ/

it wont work in ie lte 7

Upvotes: 0

SickHippie
SickHippie

Reputation: 1402

"Or should I use jquery to calculate the height of newsWrapper, subtract the newsNav heights, and news from it, halve that and then add it as margin-top for each of the content DIVs?"

This. Padding-top works too.

Upvotes: 1

Related Questions