|
|
Posted by Ben C on 04/02/07 21:48
On 2007-04-02, lejason@gmail.com <lejason@gmail.com> wrote:
> I am working on creating a localization template for my company. We
> are looking to make these templates cross-browser, cross-device
> compatible...so we're going all CSS. The template is done but there
> is one small issue.
>
> Part of the design includes numerous floating boxes that will hold
> various dynamic info. To place and float the boxes is simple enough.
> However, I want these boxes to act as a single unit (similar to a
> table) in regards to their dimensions. In other words, I want them to
> groups of them (specifically, rows) to have the same height and I want
> that height to be based on which ever box has the most content (again,
> if you're having trouble understanding what im asking -- think of how
> a table works, the dimensions of the cells adjust to the cell with the
> most info).
Yes, and table-cells are the only things that work like that.
> So, I obviously cant set the height (because it will be dynamic) and
> more, I want this to be compatible with IE so I cant use quick-fix'
> like "min-height"
>
> so CSS kids...any ideas?
There is no alternative to table-cells to do exactly what you want.
If the individual floating boxes don't have to have distinct borders or
background colours, then you can try something like the example below.
They are different heights, but each "row" takes on the height required
for the tallest float so they can be made to line up horizontally, just
not to appear in individual pigeon-holes.
<head>
<style type="text/css">
div.cell
{
float: left;
margin-right: 2em;
/*
* If you add a border to these you will see that they aren't
* the same height along the row, of course.
*/
}
div.row
{
/*
* We set overflow hidden to make this a BFC root and therefore
* include floating descendents in its height
*/
overflow: hidden;
padding: 1em;
border: 1px solid black;
margin-top: 0.5em;
}
</style>
</head>
<body>
<div class="row">
<div class="cell">
a couple<br>
of lines
</div>
<div class="cell">
one line
</div>
<div class="cell">
one<br>
two<br>
three lines
</div>
</div>
<div class="row">
<div class="cell">
a couple<br>
of lines
</div>
<div class="cell">
one<br>
two<br>
three lines
</div>
<div class="cell">
one line
</div>
</div>
</body>
[Back to original message]
|