Posted by lejason on 04/02/07 20:07

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>

[Back to original message]