css - min height by number of lines

html height css
Obmerk Kronen picture Obmerk Kronen · Jun 22, 2012 · Viewed 26k times · Source

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

Answer

o.v. picture o.v. · Jun 22, 2012

Why are you so opposed to the idea of setting min-height in ems? If you have line-height set in ems, multiply that by three and you got your desired height!

div {
    line-height:1.5em;
    min-height:4.5em;
    float:left;
    width:33%;/*close enough*/
}

Fiddled

Update: setting min-height to three lines is an exercise in futility - it does not account for scenarios where content does not fit into the space available. You could use faux columns instead to make content appear to be of uniform height within the row

Related questions

How to make a div 100% height of the browser window

I have a layout with two columns - a left div and a right div. The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now …

Read More
Make body have 100% of the browser height

I want to make body have 100% of the browser height. Can I do that using CSS? I tried setting height: 100%, but it doesn't work. I want to set a background color for a page to fill the entire browser window, …

Read More
How to get div height to auto-adjust to background size?

How do I get a div to automatically adjust to the size of the background I set for it without setting a specific height (or min-height) for it?

Read More