HTML Form (Read-only fields)
by thakkar
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<div class="location-details">
<p class="icp-number-wrapper">
ICP Number / Address: <span class="icp-number">0008012923TUAE6 - 9B CARNOT STREET GLENHOLME ROTORUA</span></p>
<div class="location-details-left">
<div class="row">
<div class="left-column">
FreeForm:
</div>
<div class="right-column">
</div>
</div>
<div class="row">
<div class="left-column">
Flat:
</div>
<div class="right-column">
</div>
</div>
<div class="row">
<div class="left-column">
House No:
</div>
<div class="right-column">
9B</div>
</div>
<div class="row">
<div class="left-column">
Street:
</div>
<div class="right-column">
CARNOT STREET</div>
</div>
<div class="row">
<div class="left-column">
Suburb:
</div>
<div class="right-column">
GLENHOLME</div>
</div>
<div class="row">
<div class="left-column">
Town:
</div>
<div class="right-column">
ROTORUA</div>
</div>
<div class="row">
<div class="left-column">
Notes:
</div>
<div class="right-column">
REAR UNIT</div>
</div>
<div class="row">
<div class="left-column">
...
CSS
.location-details {width:880px;margin-bottom:20px; margin-top:10px; border:1px solid #4E75B3;}
.location-details-left {float:left;padding:10px 10px 10px 20px;width:415px;}
.location-details-right {float:left;padding:10px;width:415px;}
.location-details .row {margin-bottom:5px; overflow:hidden;}
.location-details .left-column {float:left; font-weight:bold; margin-right:10px; width:130px;}
.location-details .right-column { float:left;width: 245px; }
.icp-number-wrapper {font-weight:bold;margin: 10px 0 10px 20px;}
.icp-number {margin-left:10px;}