Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Adjusting Height (CSS templates)

Reply
Thread Tools

Adjusting Height (CSS templates)

 
 
lejason@gmail.com
Guest
Posts: n/a
 
      04-02-2007
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>

 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      04-02-2007
Scripsit http://www.velocityreviews.com/forums/(E-Mail 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.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
 
 
 
Ben C
Guest
Posts: n/a
 
      04-02-2007
On 2007-04-02, (E-Mail Removed) <(E-Mail Removed)> 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>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
adjusting the height of an iframe to fit the contents. Cal Who ASP .Net 2 06-01-2010 04:11 PM
adjusting the height and width of innerHTML newbie Javascript 0 05-16-2007 08:38 AM
Adjusting Input field size (height) Adam Smith HTML 3 09-09-2006 10:09 AM
TD height not adjusting to new breaks added to innerHTML Fredyy Javascript 3 07-14-2006 02:48 AM
Adjusting the width and height of a popup window Jesse Joseph Acosta Javascript 1 11-18-2003 09:33 PM



Advertisments