Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How to have columns with equal height?

Reply
Thread Tools

How to have columns with equal height?

 
 
Fister
Guest
Posts: n/a
 
      01-03-2008
I'd like for the div.something-else below the three columns to be placed
25 pixels below the coloumn with the longest text. Unfortunately with the
code below it only relates to the center-column. That causes problems if
the text in left- or right-column are long. How can I fix this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Column</title>
<style type="text/css">
#page
{
width: 620px;
}

#left-column
{
border: 1px solid #000000;
float: left;
width: 200px;
}

#right-column
{
border: 1px solid #000000;
float: right;
width: 200px;
}

#center-column
{
border: 1px solid #000000;
margin: 0 210px 0 210px;
}

#something-else
{
border: 1px solid #000000;
margin-top: 25px;
}
</style>
</head>
<body>
<div id="page">
<div id="column-container">
<div id="left-column">
<span class="text">left left left left left left left left left left
left left left left left left left left left left left left left left left
left left left left left left left left left left left left left left left</span>

</div>
<div id="right-column">
<span class="text">right right right right right right right right right
right</span>
</div>
<div id="center-column">
<span class="text">center center center center center center center
center center center</span>
</div>
</div>
<div id="something-else">
something else something else something else
</div>
</div>
</body>
</html


 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      01-03-2008
In article <(E-Mail Removed)>,
Fister <(E-Mail Removed)> wrote:

> I'd like for the div.something-else below the three columns to be placed
> 25 pixels below the coloumn with the longest text. Unfortunately with the
> code below it only relates to the center-column. That causes problems if
> the text in left- or right-column are long. How can I fix this?
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
> <head>
> <title>Column</title>
> <style type="text/css">
> #page


I could have sworn there was something that might be a good fix
for this in a post a few minutes ago!

http://examples.tobyinkster.co.uk/3col-new

Just use this, invoice your client, and you can go home.

--
dorayme
 
Reply With Quote
 
 
 
 
Nico Schuyt
Guest
Posts: n/a
 
      01-03-2008
dorayme wrote:
> Fister <(E-Mail Removed)> wrote:
>
>> I'd like for the div.something-else below the three columns to be
>> placed 25 pixels below the coloumn with the longest text.
>> Unfortunately with the code below it only relates to the
>> center-column. That causes problems if the text in left- or
>> right-column are long. How can I fix this?
>>
>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
>> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>> <html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
>> <head>
>> <title>Column</title>
>> <style type="text/css">
>> #page


> I could have sworn there was something that might be a good fix
> for this in a post a few minutes ago!
> http://examples.tobyinkster.co.uk/3col-new
> Just use this, invoice your client, and you can go home.


I have the same problem as Els (freezes in IE /Windows XP Home).

--
Nico


 
Reply With Quote
 
Nico Schuyt
Guest
Posts: n/a
 
      01-03-2008
Fister wrote:
> I'd like for the div.something-else below the three columns to be
> placed 25 pixels below the coloumn with the longest text.
> Unfortunately with the code below it only relates to the center-column.
> That causes problems
> if the text in left- or right-column are long. How can I fix this?


Maybe something like http://www.html.it/articoli/niftycube/nifty8.html ?

--
Nico


 
Reply With Quote
 
Fister
Guest
Posts: n/a
 
      01-03-2008
Hello dorayme,

> I could have sworn there was something that might be a good fix for
> this in a post a few minutes ago!
>
> http://examples.tobyinkster.co.uk/3col-new


Thanks, that would be a solution. But isn't it possible without the use of
JavaScript


 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      01-03-2008
On 2008-01-03, Fister <(E-Mail Removed)> wrote:
> I'd like for the div.something-else below the three columns to be placed
> 25 pixels below the coloumn with the longest text. Unfortunately with the
> code below it only relates to the center-column. That causes problems if
> the text in left- or right-column are long. How can I fix this?


Put another div around #something-else, with clear: both and
padding-top: 1px set on it.

Then set margin-top on something-else to only 24px (because of the 1px
of padding).

[...]

Like this:

<div style="clear: both; padding-top: 1px">
> <div id="something-else">
> something else something else something else
> </div>

</div>

You need the other div (rather than just setting clear on
something-else) because otherwise its 25px margin-top is absorbed by the
clearing offset.

Padding-top of 1px prevents margin collapsing between the new div and
#something-else.
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      01-03-2008
Well bust mah britches and call me cheeky, on Thu, 03 Jan 2008 21:53:16
GMT Fister scribed:

> Hello dorayme,
>
>> I could have sworn there was something that might be a good fix for
>> this in a post a few minutes ago!
>>
>> http://examples.tobyinkster.co.uk/3col-new

>
> Thanks, that would be a solution. But isn't it possible without the
> use of JavaScript?


Of course it is. But post a url (preferably with css included.) I'm not
going to institute your code as your page to solve your problem.

Btw, I'm pretty sure it _is_ easily solvable.

--
Neredbojias
Riches are their own reward.
 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      01-03-2008

"Fister" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> I'd like for the div.something-else below the three columns to be placed
> 25 pixels below the coloumn with the longest text. Unfortunately with the
> code below it only relates to the center-column. That causes problems if
> the text in left- or right-column are long. How can I fix this?


http://www.nrkn.com/3ColEqualPositioned/

Tested in Safari, Opera, Firefox, IE 6 & 7.

 
Reply With Quote
 
GTalbot
Guest
Posts: n/a
 
      01-04-2008
On 3 jan, 18:43, "Nik Coughlin" <(E-Mail Removed)> wrote:
> "Fister" <(E-Mail Removed)> wrote in message
>
> news:(E-Mail Removed)...
>
> > I'd like for the div.something-else below the three columns to be placed
> > 25 pixels below the coloumn with the longest text. Unfortunately with the
> > code below it only relates to the center-column. That causes problems if
> > the text in left- or right-column are long. How can I fix this?

>
> http://www.nrkn.com/3ColEqualPositioned/
>
> Tested in Safari, Opera, Firefox, IE 6 & 7.


Before people start copying that CSS template, I'd like to point out a
few problems or issues with the webpage:

1- It uses a lot of positioning (relative and absolute) and also
floats. As a rule, I try to avoid positioning (rel. and abs.) when
using float. I either use only float (with clear) or only positioning
but not both.

2- Try highlighting/selecting some text in the yellow (left) column,
preferably toward the top in Internet Explorer 7: impossible.

3- I wonder why the template uses so many empty divs:
<div class="leftBack"></div>
<div class="rightBack"></div>
<div class="middleBack"></div>
<div class="clear"></div>

Clearing with structural markup is not recommendable, certainly not
semantic markup.

Regards, Gérard
 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      01-04-2008
"GTalbot" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
On 3 jan, 18:43, "Nik Coughlin" <(E-Mail Removed)> wrote:
>> "Fister" <(E-Mail Removed)> wrote in message
>>
>> news:(E-Mail Removed)...
>>
>> > I'd like for the div.something-else below the three columns to be
>> > placed
>> > 25 pixels below the coloumn with the longest text. Unfortunately with
>> > the
>> > code below it only relates to the center-column. That causes problems
>> > if
>> > the text in left- or right-column are long. How can I fix this?

>>
>> http://www.nrkn.com/3ColEqualPositioned/
>>
>> Tested in Safari, Opera, Firefox, IE 6 & 7.

>
> Before people start copying that CSS template, I'd like to point out a
> few problems or issues with the webpage:


Thank you for taking the time to look at it

> 1- It uses a lot of positioning (relative and absolute) and also
> floats. As a rule, I try to avoid positioning (rel. and abs.) when
> using float. I either use only float (with clear) or only positioning
> but not both.


What led you to formulate that rule? I'm interested to hear, if you have a
good reason I may have to rethink my way of doing certain things.

> 2- Try highlighting/selecting some text in the yellow (left) column,
> preferably toward the top in Internet Explorer 7: impossible.


Hmmm, you're right, but really this is a problem with IE 7, not the layout.
I believe it would be solvable with some trivial hackery inside the lte IE 7
conditional comment, and I will probably do so later.

> 3- I wonder why the template uses so many empty divs:
> <div class="leftBack"></div>
> <div class="rightBack"></div>
> <div class="middleBack"></div>
> <div class="clear"></div>


Aside from the clearing div, one empty div for each column. The empty divs
sit behind the actual columns, taking their height from the parent div (ie
the height of the highest child element) via absolute positioning within a
relatively positioned parent, thereby allowing proper use of background,
border etc. on the columns. I don't think a little extra markup to achieve
an otherwise difficult effect is such a crime, but again, maybe I would
change my mind if I were aware of your reasoning

> Clearing with structural markup is not recommendable, certainly not
> semantic markup.


What would you recommend instead? I was of the opinion that a div is fairly
semantically neutral.

 
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
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
Multiple Equal Height Columns Test Jeff HTML 11 01-23-2008 12:33 AM
Internet Sharing: Equal upload speeds but un-equal download speeds =?Utf-8?B?TkpU?= Wireless Networking 3 09-15-2007 06:22 AM
Can 2 columns of a DataGrid have a single heading OR can I have two controls in 1 column? mark4asp ASP .Net 2 11-11-2006 02:13 AM
Aussie info req..In Kiwiland we have Pricespy,what is the equal in Vic Ockerr Computer Support 2 10-11-2004 11:21 AM



Advertisments