Boxed Layout

by Kyle Mitofsky

HTML

<fieldset class="EntryFieldSet"><legend id="ScreeningTitle">Screening:</legend>
<div class="floatbox">
    <label>Screening Type:</label>
    <select></select>
</div>
<div class="floatbox">
    <label>Date:</label>
    <input type='text' />
</div>
<div class="floatbox">
    <label>Place of Screening:</label>
    <select></select>
</div>
<div class="floatbox">
    <label>Screener Initials:</label>
    <select></select>
</div>
    
<br/>
<!--Un Comment following block to format correctly -->
<!-- <br/><br/> -->

<div class="floatbox">
    <label>Right Ear Results:</label>
    <select></select>
</div>
<div class="floatbox">
    <label>Right Ear Technology:</label>
    <select></select>
</div>
<div class="floatbox">
    <label>Left Ear Results:</label>
    <select></select>
</div>
<div class="floatbox">
    <label>Left Ear Technology:</label>
    <select></select>
</div>
<br/>
<div id="screeningButtons">
    <button type='button'>Edit</button>
    <button type='button'>Cancel</button>
    <button type='button'>Save</button>
</div>
</fieldset>

CSS

.floatbox {
    display: inline-block;
    width: 175px;
    margin: 0;
    padding-top: 5px;
    float: left;
}
.floatbox input, select, label {
    width: 150px;
    margin: 0px;
}
.EntryFieldSet {
    width: 735px;
    padding-left: 15px;
    overflow: hidden;
}