Basic HTML Layout w/Divs

by mrrodd

HTML

<div>
                <label for="WebName">Name</label>
                <input type="text" id="WebName" />
            </div>
            <div>
                <label for="WebEmail">Email</label>
                <input type="text" id="WebEmail" />
            </div>
            <div>
                <label for="WebPhone">Phone</label>
                <input type="text" id="WebPhone" />
            </div>
            
            <hr />
            
            <div style="width: 100%; overflow: hidden;">
                <!-- left -->
                <div style="width: 50%; float:left">
                    <div>
                        <label for="ClientFirstName">Client First Name*</label>
                        <input type="text" id="ClientFirstName" />
                    </div>

                    <div>
                        <label for="ClientBirthDate">Client Birth Date</label>
                        <input type="text" id="ClientBirthDate" />
                    </div>

                    <div>
                        <label for="ClientState">Client State*</label>
                        <select id="ClientState">
                            <option selected disabled value> -- Select an option -- </option>
                            <option value="AL">Alabama</option>
                            <option value="AK">Alaska</option>
                            <option value="AZ">Arizona</option>
                            <option value="AR">Arkansas</option>
                            <option value="CA">California</option>
                            <option value="CO">Colorado</option>
                            <option value="CT">Connecticut</option>
                            <option value="DE">Delaware</option>
                            <option value="DC">District Of Columbia</option>
                            <option value="FL">Florida</option>
                            <option value="GA">Georgia</option>
                            <option...

CSS

body {
    font-family: Arial;
}

label {
    width: 180px;
    color: navy;
    display: inline-block;
}

input.text {
    width: 200px;
    display: inline-block;
}

select {
    width: 173px;
    display: inline-block;
}

div {
    margin-bottom: 5px;
}