The following CSS and HTML gives a two column output on a HTML page:
/* Create two equal columns that floats next to each other */
.awarecolumn {
float: left;
width: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.awarerow:after {
content: "";
display: table;
clear: both;
}
<h2>Two Equal Columns</h2>
<div class="awarerow">
<div class="awarecolumn">
<strong>
Client Name: <<ClientMaster.FirstName>> <<ClientMaster.MiddleName>> <<ClientMaster.LastName>><br>
Date of Birth: <<ClientMaster.DateOfBirth>> Gender: <<ClientMaster.Gender>> Race: <<ClientMaster.Race>> Ethnicity: <<ClientMaster.Ethnicity>><br>
Social Security Number: <<ClientMaster.SocialSecurityNumber>> Driver's License Number: <<ClientMaster.DriversLicenseNumber>>
</strong>
</div>
<div class="awarecolumn">
<strong>
Address: <br>
<<ClientMaster.AddressLine1>> <br>
<<ClientMaster.AddressLine2>> <br>
<<ClientMaster.City>> <<ClientMaster.State>> <<ClientMaster.ZipCode>>
<br><br>
Phone: <<ClientMaster.PhoneNumber>><br>
</strong>
</div>
</div>
In Aware, I have the above CSS placed in my custom css file, and then the HTML in a Form Cell of type HTML on my form.
The two 'columns' end up stacked one above the other as if they are in separate rows.
What am I missing?
How can I get the Aware Form to show the data the same way a 'normal' HTML page does?
Thanks,
Jim
