ansaurus

Question

Answer 1

+1 A:

The following renders properly on IE7, Firefox 3, and Google Chrome, now that I've fixed the boneheaded error in the CSS:

<html>
<head>
<style type="text/css">
#one {height: 33%; overflow: auto;}
#two {height: 33%; overflow: auto;}
#three {height: 33%; overflow: auto;}
</style>
</head>

<body>

<p id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget pede et eros adipiscing ornare. Sed ipsum dui, pulvinar eget, iaculis at, fermentum ac, lorem. Phasellus bibendum diam a nibh. In turpis lacus, condimentum id, faucibus ut, rhoncus id, enim. Quisque nec nunc at lacus placerat facilisis. Etiam mi lectus, placerat sit amet, ultricies at, tempus in, augue. Nunc in ante et erat ullamcorper pulvinar. Etiam turpis sapien, consequat vel, dignissim in, porttitor at, lectus. Integer dictum, massa eu scelerisque pretium, magna ligula auctor sapien, et tincidunt sem libero ac arcu. In at metus. Quisque quis diam at ipsum eleifend volutpat. Mauris tempor rutrum lectus. Proin fermentum nisi eu sem. Nulla eu eros. Donec velit metus, tristique tincidunt, egestas sed, tincidunt fermentum, nibh. In hac habitasse platea dictumst. Vivamus porta. Proin rhoncus ullamcorper leo. Nulla viverra, eros a dictum interdum, ante diam luctus metus, non placerat tellus metus ac lacus.</p>

<p id="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget pede et eros adipiscing ornare. Sed ipsum dui, pulvinar eget, iaculis at, fermentum ac, lorem. Phasellus bibendum diam a nibh. In turpis lacus, condimentum id, faucibus ut, rhoncus id, enim. Quisque nec nunc at lacus placerat facilisis. Etiam mi lectus, placerat sit amet, ultricies at, tempus in, augue. Nunc in ante et erat ullamcorper pulvinar. Etiam turpis sapien, consequat vel, dignissim in, porttitor at, lectus. Integer dictum, massa eu scelerisque pretium, magna ligula auctor sapien, et tincidunt sem libero ac arcu. In at metus. Quisque quis diam at ipsum eleifend volutpat. Mauris tempor rutrum lectus. Proin fermentum nisi eu sem. Nulla eu eros. Donec velit metus, tristique tincidunt, egestas sed, tincidunt fermentum, nibh. In hac habitasse platea dictumst. Vivamus porta. Proin rhoncus ullamcorper leo. Nulla viverra, eros a dictum interdum, ante diam luctus metus, non placerat tellus metus ac lacus.</p>

<p id="three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget pede et eros adipiscing ornare. Sed ipsum dui, pulvinar eget, iaculis at, fermentum ac, lorem. Phasellus bibendum diam a nibh. In turpis lacus, condimentum id, faucibus ut, rhoncus id, enim. Quisque nec nunc at lacus placerat facilisis. Etiam mi lectus, placerat sit amet, ultricies at, tempus in, augue. Nunc in ante et erat ullamcorper pulvinar. Etiam turpis sapien, consequat vel, dignissim in, porttitor at, lectus. Integer dictum, massa eu scelerisque pretium, magna ligula auctor sapien, et tincidunt sem libero ac arcu. In at metus. Quisque quis diam at ipsum eleifend volutpat. Mauris tempor rutrum lectus. Proin fermentum nisi eu sem. Nulla eu eros. Donec velit metus, tristique tincidunt, egestas sed, tincidunt fermentum, nibh. In hac habitasse platea dictumst. Vivamus porta. Proin rhoncus ullamcorper leo. Nulla viverra, eros a dictum interdum, ante diam luctus metus, non placerat tellus metus ac lacus.</p>

</body>

</html>

JSBangs 2008-12-09 17:11:18

Answer 2

+4 A:

Maybe I'm missing something, but given:

  <div id="column">
    <div id="a" class="cell">A</div>
    <div id="b" class="cell">B</div>
    <div id="c" class="cell">C</div>
  </div>

What's wrong with:

 #column
 {
  height: 100%;
  width: 20%;
 }

 #column .cell
 {
  height: 31%;
  margin: 1%;
  background-color: green;
  overflow: auto;
 }

annakata 2008-12-09 17:11:25

Answer 3

+1 A:

I won't directly answer your question but I hope you don't downvote me for it!!

The greatest framework I've seen here that does seriously good stacking of divs is the great http://960.gs

It allows you to set fixed sizes for divs and bounces divs that won't fit in your layout below. The techniques in the css there, including Meyer's Reset.css are excellent.

It has guaranteed learning for everyone even if you just steal the css and don't use the grid.

Stewart Robinson 2009-04-03 18:17:01

no downvote here, I actually didn't know about some of these css frameworks when I asked this question. would have saved a lot of time :-P

Joel Martinez 2009-04-03 19:36:25

ansaurus

tags:

views:

answers:

Stacking Divs with CSS

related questions