I think I already know the answer to this one, but i hope maybe someone will have a some neat trick for that .
I want to specify a min-height of a DIV , but not px / % based . (I know it sounds strange , but it is for compatibility reasons / responsiveness)
Basically I want to be able to specify it by number of lines .
I have a grid of DIVS , but the elements inside are not fixed, so one element can have 3 lines, and the next one only 2 or 1 line . this messes up the layout .
Basically , what I need is THIS :
===================== ===================== =====================
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur
adipiscing elit.
===================== ===================== =====================
===================== ===================== =====================
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur
adipiscing elit.
===================== ===================== =====================
and NOT this :
===================== ===================== =====================
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur
adipiscing elit. ===================== =====================
=====================
===================== =====================
===================== Lorem ipsum dolor sit Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur =====================
amet, consectetur =====================
adipiscing elit.
=====================
can this sort of thing can be achieved by specified "I want 3 lines" ? (As opposed to pixels, percentage / em ??)
Edit I
After comments -
What I really want is something like the FORM elements , INPUT or TEXTAREA where you can simply specify the height and width by lines / characters !
<TEXTAREA NAME=string, ROWS=n, COLS=n> </TEXTAREA>
It is hard o believe that no one has invented such a solution and left us all to struggle with PX / em / % calculations and the likes ..
You should use a clearfix hack
It will allow you to get your divs aligned without specifying any height. It's like a line separator :
===================== ===================== =====================
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur
adipiscing elit. ===================== =====================
=====================
{clearfix}
===================== ===================== =====================
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur =====================
===================== adipiscing elit.
=====================
You still can set height / margin on each div, of course :
EDIT :
For an internal equal size without using tables, you've got several solutions :