html - The 3rd data cell won't align all the way to the right -

html - The 3rd data cell won't align all the way to the right -

i created wrapper 3 info cells fill 100% of area. 3rd info cell should aligned way right, can see in jsfiddle, isn't aligned way right. have outer cells @ 48% , middle cell @ 4% adds 100%. need change?

here's jsfiddle: http://jsfiddle.net/huskydawgs/5cypdu4q/2/

my html

<div class="wrapper-data"> <div class="data_cell1"> <p><strong>contact</strong>: link polk, manager<br /> <strong>phone</strong>: (407) 665-7177<br /> <strong>email</strong>: <a href="mailto:lpolk@seminolecountyfl.gov">lpolk@seminolecountyfl.gov</a></p> </div> <div class="data_cell2"></div> <div class="data_cell3"> <p class="right"><strong>fax</strong>: (407) 665-7183<br /> <strong>department</strong>: budget<br /> <strong>agency</strong>: seminole county, florida</p> </div> </div>

my css:

/* wrapper - info */ .wrapper-data { position: relative; width: 100%; border: none; margin: 20px 0 0 0; overflow: hidden; border:1px solid black; } .wrapper-data p { font-family:arial,helvetica,sans-serif; font-size:16px; color:#616161; margin:0 0 0 49px; text-align:left; font-weight:normal; line-height: 24px; } .wrapper-data p.right { font-family:arial,helvetica,sans-serif; font-size:16px; color:#616161; margin:0 0 0 80px; text-align:left; font-weight:normal; line-height: 24px; } .data_row { height: 100%; min-height: 100%; white-space: nowrap; display: table; width: 100%; } .data_cell1 { width: 48%; white-space: normal; display: table-cell; vertical-align: middle; } .data_cell2 { width: 4%; display: table-cell; white-space: normal; } .data_cell3 { width: 48%; display: table-cell; white-space: normal; border:1px solid red; }

float property may trick, 2nd column should have info @ to the lowest degree , 3rd should 47% sake of border defined

.data_cell1 { width: 48%; white-space: normal; display: table-cell; vertical-align: middle; float: left; } .data_cell2 { width: 4%; display: table-cell; white-space: normal; float: left; } .data_cell3 { width: 47%; display: table-cell; white-space: normal; border:1px solid red; float: right; }

or 3rd column use

.data_cell3 { width: 48%; display: table-cell; white-space: normal; outline:1px solid red; float: right; }

3rd column leave width desired alter border outline, outilne has no effect container width border, padding or margin does

html css