Want hybrid alignment in form

Need two label-input pairs on one row. Forum search provides too many hits on “CSS Form Align”. I beg your indulgence for a question no doubt answered many times.

Pulled example from Sitepoint’s “The Art & Science of CSS”. It works fine except for the line where I want to have the Date and Time as two separate label-input pairs on the same line.

Here’s the portion of my code:

<h1>Add Lesson</h1>
<form action=“/hrf/verify.php”
method=“post”>
<fieldset id=“participant”>
<legend>Lesson Participants</legend>
<ul>
<li>
<label for=“studentname”>Student Name:</label>
<input id=“studentname” name=“studentname” class=“text” type=“text” />
</li>
<li>
<label for=“date”>Lesson Date</label>
<input id=“date” name=“date” class=“text” type=“text” />
</li>
<li>
<label for=“time”>Lesson Time</label>
<input id=“time” name=“time” class=“text” type=“text” />
</li>
<li>
<label for=“instructor”>Instructor Name:</label>
<input id=“instructor” name=“instructor” class=“text” type=“text” />
</li>
<li>
<label for=“horsename”>Horse Name:</label>
<input id=“horsename” name=“horsename” class=“text” type=“text” />
</li>
<li>
<label for=“sidewalkers”>Sidewalker(s):</label>
<input id=“sidewalkers” name=“sidewalkers” class=“text” type=“text” />
</li>
</ul>
</fieldset> <!-- participant –>
<fieldset id=“recaparea”>…

And here’s the CSS

#main {
float:right;
background: #C2DCF3;
width: 576px;
}
#main h1 {
text-align: center;
color: #C69A55;
}
#main #participant label {
float: left;
width: 6.5em;
margin-right: 1em;
}
#main #recaparea label {
display: block;
}
#main fieldset {
margin: 1.5em 0 0 0;
padding: 0;
}
#main legend {
margin-left: 1em;
color: #000
font-weight: bold;
}
#main input {
width: 300px;
}

Again, what I want to do is put the date and time on the same line on the form.

I’m sure I’ll be ashamed of myself when you show me how simple it is.

Regards,

Grnadpa

Hi,

Just move the extra pair into the same list element and then float all of them by adding a class to the list element so that you can target them.


<li class="date-time">
                <label for="date">Lesson Date</label>
                <input id="date" name="date" class="text" type="text" />
                <label for="time">Lesson Time</label>
                <input id="time" name="time" class="text" type="text" />
</li>


#main #participant .date-time input {
    float:left;
    width:84px;
}

Added to your code roughly like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#main {
    float:right;
    background: #C2DCF3;
    width: 576px;
}
#main h1 {
    text-align: center;
    color: #C69A55;
}
#main #participant label {
    float: left;
    width: 7em;
    margin-right: 1em;
    text-align:right;
}
#main #recaparea label {
    display: block;
}
#main fieldset {
    margin: 1.5em 0 0 0;
    padding: 0;
}
#main legend {
    margin-left: 1em;
    color: #000;
    font-weight: bold;
}
#main input {
    width: 300px;
}
#main #participant .date-time input {
    float:left;
    width:84px;
}
#main ul {
    margin:0;
    padding:0;
    list-style:none;
}
#main li {
    width:100&#37;;
    clear:both;
    margin:10px 0 0;
    overflow:hidden;
}
</style>
</head>
<body>
<h1>Add Lesson</h1>
<div id="main">
    <form action="/hrf/verify.php" method="post">
        <fieldset id="participant">
        <legend>Lesson Participants</legend>
        <ul>
            <li>
                <label for="studentname">Student Name:</label>
                <input id="studentname" name="studentname" class="text" type="text" >
            </li>
            <li class="date-time">
                <label for="date">Lesson Date</label>
                <input id="date" name="date" class="text" type="text" >
                <label for="time">Lesson Time</label>
                <input id="time" name="time" class="text" type="text" >
            </li>
            <li>
                <label for="instructor">Instructor Name:</label>
                <input id="instructor" name="instructor" class="text" type="text" >
            </li>
            <li>
                <label for="horsename">Horse Name:</label>
                <input id="horsename" name="horsename" class="text" type="text" >
            </li>
            <li>
                <label for="sidewalkers">Sidewalker(s):</label>
                <input id="sidewalkers" name="sidewalkers" class="text" type="text" >
            </li>
        </ul>
        </fieldset>
    </form>
</div>
</body>
</html>


Tweak to suit :slight_smile:

Perfect. Thanks (And, as expected, I’m ashamed of myself with how simple it is.)