Adjusting Height (CSS templates)

[lejason]

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).

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?

Here's what I got for code. The first part is the relevant


------ Relevant ---------

#imagespot {
float:left;
margin: 5px 0 0 10px;
}
#contentspot {
float: left;
margin: 5px 0 0 10px;
width: 240px;
background:#f2ecde url(../images/b_bottom_right.gif) bottom right no-
repeat;
height: 280px;
}
#contentspot p{
padding: 10px;
}
#menuarea{
clear:both;
margin-left: 140px;
margin-right: 0px;
height: 24em;
}
#menu {
float: left;
margin: 10px 0 0 10px;
background:#f2ecde url(../images/b_bottom_right.gif) bottom right no-
repeat;
width:195px;
height: 18em;
}
#menu p {
padding: 10px;
}

------ End of Relevant ---------

/* Main Content */


#content-container {
width:770px;
}
#leftmenu{
float:left;
width:150px;
margin-left: 0px;
margin-top: 5px;
background:#f2ecde url(../images/b_bottom_right.gif) bottom right no-
repeat;
}
#leftmenu p{
font-weight:bold;
padding: 10px;
}
#rightcontent{
float:right;
margin-top: 5px;
width:575px;
padding:15px;
background:#FFF;
}


And here is what I got for the relevant HTML

<div id="content-container">
<div id="leftmenu">
<p>Links<br />
and more links<br />
Another link<br />
More links still<br />
Last link</p>
</div>

<div id="imagespot">
<img src="images/sechead.jpg" />
</div>
<div id="contentspot">
<p>Vestibulum iaculis commodo mi. Nunc ipsum ligula, tincidunt
commodo, luctus id, ultricies in, mauris. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Fusce consectetuer lacinia lacus. Nullam nunc orci, ultrices at,
dignissim ac, condimentum ac, magna. Sed iaculis metus quis pede.
Nullam consequat.</p>
</div>
<div id="menuarea">
<div id="menu"><p>Vestibulum iaculis commodo mi. Nunc ipsum ligula,
tincidunt commodo, luctus id, ultricies in, mauris. Pellentesque
habitant morbiSed iaculis metus quis pede. Nullam consequat.</p>
</div>
<div id="menu"><p>Vestibulum iaculis commodo mi.</p>
</div>
<div id="menu"><p>Vestibulum iaculis commodo mi. Nunc ipsum ligula,
tincidunt commodo, luctus id.</p>
</div>
</div>
</div>


And I want it to look like this page <a href="http://terex.com/
main.php?obj=spot&action=SPLASH&nav=spot">Click Here</a>

 

[Jukka K. Korpela]

Scripsit (e-mail address removed):

The template is done but there is one small issue.

Where's the URL?

Part of the design includes numerous floating boxes that will hold
various dynamic info.

You need to identify, preferably both by visual appearance and by HTML
element structure, what the [censored] boxes you are talking about.

 

[Ben C]

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>