1

I have this html:

<div id="workAllocated">
    <h3>Work Allocated</h3>
    <p>Lorem Ipsum</p>  
    <p>Lorem Ipsum</p>  
</div>

And the following CSS:

div#contentarea.profile_edit div {
    margin-bottom: 20px;
}
div#contentarea.profile_edit div.col_01 h3 {
    font-size: 2.4em;
    margin: 0;
}
div#workAllocated p {
    margin-bottom: 0px;
    border-bottom: 1px solid red;
}

The result looks like this snapshot:

enter image description here

But I need it to looks like this:

enter image description here

The different is the vertical align of the text inside the <p> tags. It is aligned top-left inside the <p> container but it should be middle-left. I've tried some tricks as change the line-height and change the display to table-cell and then apply the vertical-align property, but none of them really work.

Thanks in advance!

Community
  • 1
  • 1
mario595
  • 3,671
  • 7
  • 34
  • 57
  • 3
    I suspect you really want to use a table for this, as your example looks like tabular data. – Derek Henderson May 08 '13 at 14:13
  • [padding](https://developer.mozilla.org/en-US/docs/CSS/padding) or [line-height](https://developer.mozilla.org/en-US/docs/CSS/line-height) – George May 08 '13 at 14:14

3 Answers3

7

Set a height for your p's and then set the line height equal to that one.

Patsy Issa
  • 11,113
  • 4
  • 55
  • 74
  • 1
    Setting heights isn't safe generally. If text size is set to larger than you expect, some of it might get cut off. – ralph.m May 08 '13 at 14:20
  • Setting a font size as well helps. – Patsy Issa May 08 '13 at 14:22
  • 1
    @mario595, you're going to have difficulty finding a satisfactory CSS solution using P tags. This looks like tabular data, and a table will have no problem with `vertical-align`, so I really think you should use a table. – Derek Henderson May 08 '13 at 14:23
  • Thanks, that worked fine. I was changing the line-height but I didn't set the height of the

    so it didn't work.

     – mario595 May 08 '13 at 14:23
1

This works for me: http://codepen.io/anon/pen/LrEcx

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

div#workAllocated p {
    margin: 0px;
    line-height: 1;
    border-bottom: 1px solid red;
    padding: 2px 0;
}

</style>

</head>
<body>

<div id="workAllocated">
    <h3>Work Allocated</h3>
    <p>Lorem Ipsum</p>  
    <p>Lorem Ipsum</p> 
    <p>Lorem Ipsum</p>  
    <p>Lorem Ipsum</p>  
    <p>LOREM IPSUM</p>
</div>

</body>
</html>
ralph.m
  • 13,468
  • 3
  • 23
  • 30
0

Just add a height to the p and adjust your line-height to it

Fiddle.

//EDIT// oops just saw the other anwser

DiederikEEn
  • 753
  • 8
  • 17