Question

Im having trouble lining up my elements correctly. What i want is to lign up my form elements the same way as I’ve lined up the elements above. The top “list” is a definitionlist (dl) and its children. I don’t want to use dl for aligning my form elements as it’s not semantically correct, and we might have people using screenreaders using the application. I’ve tried to use unordered lists, but I didnt figure out how to style them properly to get the desired result.

(Tilgangstype and Fagområde also contains select lists, ive just hid them and forgot to show them for the screenshot, same formating problem though)

This is the code I’ve been using for the top elements:

.styled-form label, .def-list dl dt {
background:#5D6DA7;
color:#fff;    
float:left;    
font-weight:bold;    
margin-right:10px;    
padding:5px;    
width:130px;
}

.styled-form input, .styled-form select, .def-list dl dd {
margin:2px 0;    
padding:5px 0;
}

I also want the line’s to break after the “block” of label and input/select.
Heres the code for the form

            <!-- Pick hospital, roles and professions -->
        <label for="Hospitals">Arbeidssted:</label>
        <select id="Hospitals" name="Hospitals">
        </select><br/>
        <label for="HospitalRoles">Tilgangstype (rolle):</label>
        <select id="HospitalRoles" >
        </select><br/>
        <label for="HospitalProfessions">Fagområde:</label>
        <select id="HospitalProfessions" >
        </select><br/>
        <!-- Start-End date -->
        <label for="FromDate">Startdato:</label>
        <input type="text" class="date" name="FromDate" id="FromDate" /><br/>
        <label for="ToDate">Sluttdato:</label>
        <input type="text" class="date" name="ToDate" id="ToDate" /> (Fylles ut ved tidsbegrenset tilgang)<br/>

(sorry for the <br/> tags)

Answer 1

Wrap your label+input combinations in an extra each, so it looks like this:

    <div>
    <label for="Hospitals">Arbeidssted:</label>
    <select id="Hospitals" name="Hospitals">
    </select>
    <div>

and then clear each div inside the form:

    form.theFormClass div{clear:both;}

The clue of when to use a wrapping div is where you find yourself saying “a ‘block’ of elements”, just as you did 🙂