Grow your CSS skills. Land your dream job.

Silly lining up problem using a float

  • # June 23, 2008 at 5:15 pm

    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:

    Code:
    #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:

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">


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

    General

    Teacher Initials:

    Observer Initials:

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

    echo’

    Year group:’;

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

    Set:

    No. of students:

    LSA:

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

    // 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:


    Individual


    Pair


    Group

    Learners ask relevant questions

    Progress of All Learners (please choose from the list)





    # June 24, 2008 at 3:21 am

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

    Does that ring any bells for anyone?

    # June 24, 2008 at 2:38 pm

    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:

    Code:
    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.

*May or may not contain any actual "CSS" or "Tricks".