- This topic is empty.
-
AuthorPosts
-
January 30, 2011 at 10:09 am #31431SAiNTParticipant
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-hackshttp://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.htmat the end, i was choosing between JavaScript and marginpadding methods.
and chose the last one:margin-bottom: -30000px; padding-bottom: 30030px;
+ overflow:hidden; to the containerbut, 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:
left left left left left left left left
right right right right right right
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
clear
tried different doctypes – nothing helps…
PLEASE, somebody help me understand, how can i make this work?
January 30, 2011 at 10:58 am #63352SAiNTParticipantP.S. don’t mention the
.wrapper {height:100px;}
the idea for this is not to have height:auto; whatsoever
January 30, 2011 at 11:27 am #63353TT_MarkMemberWhat 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?
January 30, 2011 at 2:04 pm #63361SAiNTParticipantHello Mark, thank you for your reply;
the best example of what it should be is in PSD:
http://i.imgur.com/uh217.pngi’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
contentyou can see html example of this here:
http://i56.tinypic.com/65stc8.jpgif 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 :(((January 31, 2011 at 7:56 am #63412SAiNTParticipantwolfcry911, 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.
January 31, 2011 at 9:14 am #63416SAiNTParticipantLOL!!! Chris has just made an article on this subject:
https://css-tricks.com/equal-height-blocks-in-rows/January 31, 2011 at 1:19 pm #63428TheDocMemberThis 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.