Forums

NotSoFast

Hi all,

I would really appreciate any help anyone can give on this one...

I'm trying to put some form inputs next to each other to save vertical space. The way I've done it (which may be wrong!) is to create a div for the first few elements and float it left, so that the next few elements wrap around on the right. My problem is that the very first label and text field are lower that those on the right. I can't figure this out but I'm sure it's something stupid.

Thanks in advance,

Simon

Here's the CSS:

#wrapper {
	width: 758px;
	margin: 0 auto;
	}

#firstitems {
	float: left;
	width: 382px;
	}

body {
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	color: #000000 ;
	}

h1 {
	background-color: #333399;
	color:#FFCC33;
	font-size: 1.5em;
	padding-top: 1em;
	padding-bottom: 1em;
	text-align:center;
	border: 1px dashed #ffcc33;
	}

h2 {
	clear:both;
	font-variant: small-caps;
	background-color:#FFCC33;
	border: 1px dashed #333399;
	/*margin: 10px 0 10px 0;*/
	}

p {
	
	font-size: .8em;
	}

	
.header-detail {
	font-size: .5em;
	font-weight: normal;
	font-variant:normal;
	font-style:italic;
	}

.nocheck {
	display: block;
	margin-left: 25px;
	padding: 0 0 0 10px;
	border: 1px dashed #666;
	}

form .label {
	float: left;
	width: 150px;
	}
	
.dates {
	
	margin-right: 10px;
	}

Here's the PHP/HTML:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"
\"http://www.w3.org/TR/html4/loose.dtd\">
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
<title>Complete a lesson observation form</title>

<link href=\"css/global.css\" rel=\"stylesheet\" type=\"text/css\">
</head>

<body>
<div id=\"wrapper\">
<?php
//Connect to the database
include('./includes/mysql_connect.php');

//First check to see if the form has been submitted
if (isset($POST['submitted'])) {
	
	//and if it has, then do some basic validation
	
	
	//Don't forget to convert the 3 fields to one date field
	
	
	
} //end the main isset	
?>

<!-- Here's the HTML form -->

<h1>CNS Lesson Observation Record (School Evaluation) </h1>

<form action=\"LOP.php\" method=\"post\" name=\"LOP\" class=\"LOP\" title=\"Lesson Observation Form\">
<h2>General</h2>

<div id=\"firstitems\">
<p>Teacher Initials: 
  <input name=\"teacher\" type=\"text\" id=\"teacher\" size=\"5\" maxlength=\"3\">
</p>
<p>Observer Initials: 
<input name=\"observer\" type=\"text\" id=\"observer\" size=\"5\" maxlength=\"3\">
</p>
<p>Subject:
<?php
// Make the subjects array.
$subjects = array (1 => 'Maths', 'English', 'Biology', 'Physics', 'Chemistry', 'Electronics', 'DT', 'Business Studies', 'ICT', 'Art', 'Drama', 'PE', 'Dance','Music', 'Geography', 'History', 'RE', 'CBV', 'Sociology', 'LEAP', 'French', 'German', 'Spanish', 'Govt and Politics', 'Law', 'Economics');
//Sort the subjects alphabetically
asort($subjects);
// Make the subjects pull-down menu.
echo '<select name=\"subject\">';
foreach ($subjects as $key => $value) {
	echo \"<option value=\\"$key\\">$value</option>\n\";
}
echo ' </select>';
  
echo'</p><p>Year group:';
  
// Make the year group pull-down menu.
echo '<select name=\"year_group\">';
for ($yg = 7; $yg <= 13; $yg++) {
	echo \"<option value=\\"$yg\\">$yg</option>\n\";
}
echo ' </select>';
  ?>
 </div> <!-- End of first items div -->
  </p>
  <p>Set: 
    <select name=\"set\" id=\"set\">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>Mixed</option>
    </select>
  </p>

	<p>No. of students: 
    <input name=\"no_students\" type=\"text\" id=\"no_students\" size=\"5\" maxlength=\"3\">
  </p>
  <p>LSA:  
    <label>
    <input type=\"radio\" name=\"LSA\" value=\"LSA\">
Yes</label>
    <label>
    <input type=\"radio\" name=\"LSA\" value=\"LSA\">
No</label>
</p>
  <p>Date: 
<?php  
// Make the months array.
$months = array (1 => 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

// Make the months pull-down menu.
echo '<select name=\"month\" class=\"dates\">';
foreach ($months as $key => $value) {
	echo \"<option value=\\"$key\\">$value</option>\n\";
}
echo ' </select>';

// Make the days pull-down menu.
echo '<select name=\"day\" class=\"dates\">';
for ($day = 1; $day <= 31; $day++) {
	echo \"<option value=\\"$day\\">$day</option>\n\";
}
echo ' </select>';

// Make the years pull-down menu.
echo '<select name=\"year\" class=\"dates\">';
$year = 2008;
while ($year <= 2012) {
	echo \"<option value=\\"$year\\">$year</option>\n\";
	$year++;
}
echo ' </select>';
?>  
</p>
<h2>Assessment for Learning <span class=\"header-detail\">(all lessons should demonstrate these features)</span></h2>
  <p><input name=\"objectives\" type=\"checkbox\" id=\"objectives\" value=\"checkbox\">
      Learners understand what they are learning about (objectives)</p>
  <p><input name=\"outcomes\" type=\"checkbox\" id=\"outcomes\" value=\"checkbox\">
    Learners understand what evidence they will show to demonstrate they have achieved the objectives (e.g. piece of writing, presentation, solution to a problem) </p>
  <p><input name=\"assessed\" type=\"checkbox\" id=\"assessed\" value=\"checkbox\">
Learners know how their work will be assessed </p>
  <p><input name=\"improve\" type=\"checkbox\" id=\"improve\" value=\"checkbox\"> 
    Learners know how to improve their work</p>
  <h2>Personal Learning and Thinking Skills <span class=\"header-detail\">(learners will participate in most of the following)</span></h2>
  <p><input type=\"checkbox\" name=\"checkbox\" value=\"checkbox\">
Learners have opportunities to describe and explain what they have learnt to others </p>
  <p><input type=\"checkbox\" name=\"checkbox\" value=\"checkbox\">
Learners actively explore issues, events and problems</p>
  <p><input type=\"checkbox\" name=\"checkbox\" value=\"checkbox\">
Learners analyse and evaluate information effectively </p>
<span class=\"nocheck\">
  <p>Learners are involved in different types of activities:</p>
  <p><input type=\"checkbox\" name=\"checkbox\" value=\"checkbox\">
 Individual </p>
  <p><input type=\"checkbox\" name=\"checkbox\" value=\"checkbox\">
    Pair </p>
  <p><input type=\"checkbox\" name=\"checkbox\" value=\"checkbox\">
    Group </p>
</span>
  <p><input type=\"checkbox\" name=\"checkbox\" value=\"checkbox\"> Learners ask relevant questions </p>
  <h2>Progress of All Learners <span class=\"header-detail\">(please choose from the list) </span></h2>
  <p>
    <label class=\"label\">Low ability learners:</label>
    <select name=\"LAPs\" id=\"LAPs\">
      <option value=\"1\">Better progress than might be expected</option>
      <option value=\"2\">Good progress</option>
      <option value=\"3\">At least satisfactory progress</option>
      <option value=\"4\">Less than satisfactory progress</option>
    </select>
  </p>
  <p><label class=\"label\">Middle ability learners:</label> 
      <select name=\"MAPs\" id=\"MAPs\">
          <option value=\"1\">Better progress than might be expected</option>
          <option value=\"2\">Good progress</option>
          <option value=\"3\">At least satisfactory progress</option>
          <option value=\"4\">Less than satisfactory progress</option>
    </select>
  </p>
  <p><label class=\"label\">High ability learners:</label>  
    <select name=\"HAPs\" id=\"HAPs\">
          <option value=\"1\">Better progress than might be expected</option>
          <option value=\"2\">Good progress</option>
          <option value=\"3\">At least satisfactory progress</option>
          <option value=\"4\">Less than satisfactory progress</option>
    </select>
  </p>
  
</form>
</div>
</body>
</html>

NotSoFast

Ah - it only does it in Firefox, not IE (6).

Does that ring any bells for anyone?

daGUY

Hmm. I looked at your code...you have the left column in a div called #firstitems, but the right column is just paragraphs that aren't contained in a div. I would try making a class (call it .column or something) and putting both columns of text inside of that, like so:

<div class=\"column\">
left column text
</div>
<div class=\"column\">
right column text
</div>

Float that div to the left and make its width small enough so that the two can fit together on the same line. See if that makes any difference.

treehouse : what would you like to learn today?

Forums

Silly lining up problem using a float