css - min height by number of lines

css, height, html

Solution

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 :

Using `overflow:hidden` on the parent and an extra `margin-bottom` on children if you only use background.

Using `display-table` attribute (Method 1)

Or using javascript (Method 3)

Problem

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

Original source