How to have columns with equal height?

F

Fister

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
 
D

dorayme

Fister said:
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
Click to expand...

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

Ben C

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?
Click to expand...

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 id="something-else">
something else something else something else
</div>
Click to expand...
</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.
 
N

Neredbojias

Well bust mah britches and call me cheeky, on Thu, 03 Jan 2008 21:53:16
GMT Fister scribed:
Hello dorayme,


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

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

Nik Coughlin

Fister said:
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?
Click to expand...

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

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

GTalbot

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

Tested in Safari, Opera, Firefox, IE 6 & 7.
Click to expand...

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
 
N

Nik Coughlin

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

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.
Click to expand...

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.
Click to expand...

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>
Click to expand...

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.
Click to expand...

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

Fister

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

Thank you very much for the code. At first it worked but now I've added another
two columns to the left and right which causes problem with clear: both.
Could you / anyone help me? I think this should be easy to solve but I can't
figure out how :-/

Here is the code:

http://www.bullamanka.dk/test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="dk">
<head xmlns="">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Test</title>
<style type="text/css">
body
{
margin: 10px 0 10px 0;
padding: 0;
text-align: center;
}

#page
{
background-color: #FFFFFF;
margin: 0 auto;
text-align: left;
width: 740px;
}

#page-left-column
{
background-color: #E2E2E2;
float: left;
height: 300px;
width: 200px;
}

#page-center-column
{
margin: 0 210px 0 210px;
}

#page-right-column
{
background-color: #E2E2E2;
float: right;
height: 300px;
width: 200px;
}

#page-center-column-left-column
{
background-color: #B9B9B9;
float: left;
width: 100px;
}

#page-center-column-right-column
{
background-color: #B9B9B9;
float: right;
width: 100px;
}

#page-center-column-center-column
{
background-color: #E2E2E2;
margin: 0 110px 0 110px;
width: 100px;
}

#page-another-container
{
background-color: #D9D9D9;
height: 100px;
margin-top: 24px;
}

#clear
{
clear: both;
padding-top: 1px;
}
</style>
</head>
<body>
<div id="page">
<div id="page-left-column">
left
</div>
<div id="page-right-column">
right
</div>
<div id="page-center-column">
<div id="page-center-column-container">
<div id="page-center-column-left-column">
left left left left left left left left left left left left left left
left left left left left left
</div>
<div id="page-center-column-right-column">
right right right right right right right right right right right right
right right right right right right right right
</div>
<div id="page-center-column-center-column">
center center center
</div>
</div>
<div id="clear">
<div id="page-another-container">
another
</div>
</div>
</div>
</div>
</body>
</html
 
B

Ben C

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

Thank you very much for the code. At first it worked but now I've
added another two columns to the left and right which causes problem
with clear: both. Could you / anyone help me? I think this should be
easy to solve but I can't figure out how :-/

Here is the code:

http://www.bullamanka.dk/test.html
[...]
#page-center-column
{
margin: 0 210px 0 210px;
Click to expand...
^^^^^^^^^^^^^^^^^^^^^^^^

Get rid of this line. Replace it with overflow: hidden.

If you make the center-column overflow: hidden it becomes a Block
Formatting Context.

Regular readers of alt.html will by now be familiar with the idea of
using Block Formatting Contexts to cause containers to grow in height to
accommodate floated descendents.

But here we are using two other useful properties of BFCs:

1. The clear instruction clears floats _within the same BFC_. By making
#page-center-column a BFC, it becomes the BFC for #clear. That means
that #clear no longer clears the two big floats to the left and right
(page-left-column and page-right-column).
2. A BFC with auto width, unlike a regular block box, _itself becomes
narrower_ to squeeze between floats. A regular block box doesn't, it
occupies the full available width and its inline contents flow around
the floats. That was why you were using those 210px margins on
#page-center-column. If #page-center-column is a BFC, it no longer
wants those margins.

This is all standard CSS 2.1 (well, pretty much, the specification does
allow for #page-center-column to move below the two floats rather than
squeeze between them, but I don't know of any browsers that actually do
that).

Don't know if it works in IE.
 
F

Fister

Hello Ben,
If you make the center-column overflow: hidden it becomes a Block
Formatting Context.

Regular readers of alt.html will by now be familiar with the idea of
using Block Formatting Contexts to cause containers to grow in height
to accommodate floated descendents.
...
Don't know if it works in IE.
Click to expand...

Thank you very much for your detailed explanation! It doesn't look as intended
in MSIE6 but in my case that doesn't matter :-
 
D

dorayme

Ben C said:
Regular readers of alt.html will by now be familiar with the idea of
using Block Formatting Contexts to cause containers to grow in height to
accommodate floated descendents.

But here we are using two other useful properties of BFCs:

1. The clear instruction clears floats _within the same BFC_. By making
#page-center-column a BFC, it becomes the BFC for #clear. That means
that #clear no longer clears the two big floats to the left and right
(page-left-column and page-right-column).
2. A BFC with auto width, unlike a regular block box, _itself becomes
narrower_ to squeeze between floats. A regular block box doesn't, it
occupies the full available width and its inline contents flow around
the floats. That was why you were using those 210px margins on
#page-center-column. If #page-center-column is a BFC, it no longer
wants those margins.

This is all standard CSS 2.1 (well, pretty much, the specification does
allow for #page-center-column to move below the two floats rather than
squeeze between them, but I don't know of any browsers that actually do
that).
Click to expand...

I hope you realise that every time you say stuff like this, it
makes work for me! I scurry off to see if I have to include extra
material into the story I am writing on parents and floated
children. So please be very responsible in what you say.

<g>
 
J

Jeff

Fister said:
Hello dorayme,


Thanks, that would be a solution. But isn't it possible without the use
of JavaScript?
Click to expand...
I have problems with that page in IE6 windows, it locks up the
browser. I didn't look at the javascript but this can't be difficult. I
think the basic idea is sound and should work with other two plus column
layouts.

Not since the ill fated NS4 used javascript to implement CSS (and not
well) has the use of javascript been in the toolbox for styling needs.
And the cool thing (with the obvious exception of Toby's 3 column in
IE) is that it degrades nicely.

Jeff
 
D

dorayme

Jeff said:
I have problems with that page in IE6 windows, it locks up the
browser. I didn't look at the javascript but this can't be difficult. I
think the basic idea is sound and should work with other two plus column
layouts.

Not since the ill fated NS4 used javascript to implement CSS (and not
well) has the use of javascript been in the toolbox for styling needs.
And the cool thing (with the obvious exception of Toby's 3 column in
IE) is that it degrades nicely.

Jeff
Click to expand...

Well, OK, I always leave it till very late to look at Win IE. But
by now, perhaps there is a fix for TI's page. Bootnic suggested
something. TI will look at it and we will see. God! I feel like a
cricket commentator!

[The test between Australia and India is on. (7/184) and 8 overs
to go and India will not win, the question is will Australia?]
 
J

Jeff

dorayme said:
Well, OK, I always leave it till very late to look at Win IE. But
by now, perhaps there is a fix for TI's page.
Click to expand...

My initial WAG was that the javascript was in a loop. Probably because
of the onresize event handler. TI is pretty sharp about these things I
suspect it won't be much trouble for him to fix it. Neither is it much
trouble to write your own resize code. I thought of this a couple weeks
ago after seeing all the javascript rounded corners examples, if js is
not a bad option there (it degrades well), then why not for the problem
of having same sized columns? That's one thing table layouts do well
that CSS just can't do without a little logic.


Bootnic suggested
something. TI will look at it and we will see. God! I feel like a
cricket commentator!

[The test between Australia and India is on. (7/184) and 8 overs
to go and India will not win, the question is will Australia?]
Click to expand...


I've heard that the rules of cricket are very simple.

Jeff
 
J

Jeff

dorayme said:
Ouch! What can I say? How about, '...so are the rules of chess'?
Click to expand...

Most Americans don't have a clue what this means:

The test between Australia and India is on. (7/184) and 8 overs
to go and India will not win, the question is will Australia?

Unfortunately (or not), I'm one of them!

Jeff
 
N

Neredbojias

Well bust mah britches and call me cheeky, on Mon, 07 Jan 2008 08:49:07 GMT
Jeff scribed:
Most Americans don't have a clue what this means:

The test between Australia and India is on. (7/184) and 8 overs
to go and India will not win, the question is will Australia?

Unfortunately (or not), I'm one of them!
Click to expand...

Sounds like the annual pan-Indian Ocean flapjack contest. You have to flip
each one of 7 stacks of 184 flapjacks with a spatula and catch it mid-air
within 8 minutes or it's all over.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with code 0
Help with my responsive home page 2
How can I get my menu inside of a menu to function properly? 1
Help with Visual Lightbox: Scripts 2
How to position the *tooltip* comment on these buttons? 9
Positioning CSS components 1
Image shifts to the right when export the page to pdf 4
Please Help? 0

Members online

Total: 31 (members: 2, guests: 29)
Robots: 117

Forum statistics

Threads
473,770
Messages
2,569,586
Members
45,097
Latest member
RayE496148

Latest Threads

Top