Forums

SAiNT

the solution:

http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

http://www.dave-woods.co.uk/?p=144
http://www.dave-woods.co.uk/index.php/css-faux-columns/

http://www.positioniseverything.net/articles/onetruelayout/equalheight

Russian:
http://forum.htmlbook.ru/lofiversion/index.php/t17050.html
http://htmlbook.ru/content/kolonki-odinakovoy-vysoty
http://www.getincss.ru/2009/07/11/4-sposoba-kak-sozdat-bloki-kolonki-odinakovoj-vysoty/

layouts you can use:
http://www.pmob.co.uk/temp/3colfixedtest_4.htm

at the end, i was choosing between JavaScript and margin\padding methods.
and chose the last one:

margin-bottom: -30000px; padding-bottom: 30030px;
+ overflow:hidden; to the container

but, for all those who struggling on the same problem i would honestly recommend: stop wasting your time and use TABLES!

P.S. don't forget to clear your floats ;-)

the problem:

Hello, i'm building a layout for a site, and made one big mistake - for the first time in my life i decided to build it completely on layers;
so the idea is to have this "post block" area, where in first column i put date and time, second would have the actual content, and third - a few icons.

in psd it looks like this:
http://i.imgur.com/uh217.png
(mirror link, in case the first one gets removed):
http://i51.tinypic.com/35akh8i.png

- it would be the easiest thing if i were using tables, but... stupid me. :-|
i just don't understand anything anymore... i've been struggling on this for two days now, i've tried literally everything i could find on the web on this subject, like clearfix, Faux Columns and many other hacks;

the only real solution i found to stretch two side div's with:
body {height:100%} wrapper { height:100%};
but since i'm having another post-block after the first one, this solution is not that "real" in my case..

this is the code i've been practicing with today:

<style type="text/css">
html, body {
 	background: gray;
height:100%;
	color: red;
}

.wrapper {
	background:#399;
	border:1px dashed #CCC;
	margin:30px auto;
	width:30%; height:100px;
}


.left {
	background-color:#366;
 	float:left;
	width:40px; height:100%;
	z-index:2;
}
</style></head><body>

	<div class="wrapper">

<div class="left">left left left left left left left left </div>
<div class="left" style="float:right;">right right right right right right </div>

<div style="height:auto; background:#396">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</div>

<div style="clear:both; text-align:center; z-index:-1; background:#006">clear</div>
	</div>

tried different doctypes - nothing helps...

PLEASE, somebody help me understand, how can i make this work?

SAiNT

P.S. don't mention the

.wrapper {height:100px;}

the idea for this is not to have height:auto; whatsoever

TT_Mark

What are you struggling to do?

It's hard to tell from just the code what the problem is. Do you have a live example we can look at?

SAiNT

Hello Mark, thank you for your reply;
the best example of what it should be is in PSD:
http://i.imgur.com/uh217.png

i'll try to explain in other words:
i need a three nested (wrapped) columns, where two of them would be stretched to bottom (100% height?), just like the table does; so it would look like this


| . | content | . |
| . | content | . |
| . | content | . |
| . | content | . |
| . | content | . |

while all i get by default is this:

| . | content | . |
      content
      content
      content
      content

you can see html example of this here:
http://i56.tinypic.com/65stc8.jpg

if only i could specify a height:100% to the left and right column, then there would be no problem;
but that is only possible if the wrapper has a height of 100%, which makes it useful in my case, because one post-block follows after another :(((

chrisburton

What Mark meant by a live example is a live site example. Not an image.

Do you have a website link for people to debug your code?

wolfcry911

You mention faux columns - I'd revisit that idea.
Trying to learn css layout in two or three days is quite a task.
What's a layer?

SAiNT

wolfcry911, you understand the problem correctly.
unfortunately there is a border on the first and third column, so unless i paint a vertical line on the background image, i won't get what i need... and for some reason i doubt the line would look the same on graphic as it looks when generated by browser.

thank you wolfcry911, Mark and Christopher for trying to help!

solutions in the beginning of the original thread.

SAiNT

LOL!!! Chris has just made an article on this subject:
http://css-tricks.com/equal-height-blocks-in-rows/

TheDoc

This is the worst piece of advice I've ever heard.

"but, for all those who struggling on the same problem i would honestly recommend: stop wasting your time and use TABLES!"

Don't do that.

treehouse : what would you like to learn today?

Forums

Equal Height Columns - ALL Possible Solutions