Skip to main content


This topic contains 2 replies, has 0 voices, and was last updated by  NotSoFast 11 years, 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #22807


    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,


    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;
    font-size: 1.5em;
    padding-top: 1em;
    padding-bottom: 1em;
    border: 1px dashed #ffcc33;

    h2 {
    font-variant: small-caps;
    border: 1px dashed #333399;
    /*margin: 10px 0 10px 0;*/

    p {

    font-size: .8em;

    .header-detail {
    font-size: .5em;
    font-weight: normal;

    .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" "">

    Complete a lesson observation form

    < ?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 ?>

    CNS Lesson Observation Record (School Evaluation)


    Teacher Initials:

    Observer Initials:

    < ?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
    // Make the subjects pull-down menu.
    echo ‘‘;


    Year group:’;

    // Make the year group pull-down menu.
    echo ‘‘;


    No. of students:


    < ?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 ‘‘;

    // Make the days pull-down menu.
    echo ‘‘;

    // Make the years pull-down menu.
    echo ‘‘;

    Assessment for Learning (all lessons should demonstrate these features)

    Learners understand what they are learning about (objectives)

    Learners understand what evidence they will show to demonstrate they have achieved the objectives (e.g. piece of writing, presentation, solution to a problem)

    Learners know how their work will be assessed

    Learners know how to improve their work

    Personal Learning and Thinking Skills (learners will participate in most of the following)

    Learners have opportunities to describe and explain what they have learnt to others

    Learners actively explore issues, events and problems

    Learners analyse and evaluate information effectively

    Learners are involved in different types of activities:




    Learners ask relevant questions

    Progress of All Learners (please choose from the list)



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

    Does that ring any bells for anyone?



    This reply has been reported for inappropriate content.

    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:

    left column text
    right column text

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star