Grow your CSS skills. Land your dream job.

Works in-line but not in Style block – What’s Wrong?

  • # March 17, 2009 at 4:28 pm

    I’m a simple form layout and trying to do with CSS instead of a table. Here’s the part that makes me crazy: If I put it inline it works, if I put it in the style block and call it from the div tag it doesn’t. Why, oh why can this be?

    <style type="text/css">
    .column1{
    float:left;
    margin-right:20;
    }

    .column2{
    float:left;
    }
    </style>

    Then, in the code I made these little test niblets:

    <div style="float:left; margin-right:20">thing1</div>
    <div style="float:left">thing2</div>
    <div id="column1">thing3</div>
    <div id="column2">thing4</div>
    <div class="column1">thing5</div>
    <div class="column2">thing6</div>

    And here’s how it lays out on the page:

    thing1 thing2 thing3
    thing4
    thing5
    thing6

    When it’s a style in the div tag it works. When it’s called either as a class or an id in the div tag, it doesn’t. What’s the deal? I’m sure it’s some dumb thing like it needs a pound or slash or dot somewhere. I tried it with pounds in the style-block but that didn’t change anything. What I want on my form is a column of the field names and a column of the text and select boxes that correspond to the names. Each column should align verically with as much space between as to fit the widest field-name value in column 1. In this example, all the "t’s" in things 2, 4, and 6 should align vertically. Anyone?

    # March 17, 2009 at 5:01 pm

    in CSS IDs are called by #

    id="column_left" is called by #column_left…

    classes: class="column_left" called by .column_left

    if you want to make these work, then think about your 2 columns:

    left for your label and right for your fields:

    CSS:

    Code:
    .column_left
    {
    position:relative;
    display:block;
    float:left;
    width:200px;
    etc
    }
    .column_right
    {
    position:relative;
    display:block;
    float:left;
    width:500px;
    etc
    }

    your HTML

    Code:
    label 1
    form field 2
    label 2
    form field 2
    label 3
    form field 3

    p.s. not perfect and probably wont do what you actually want but will show your errors…

    but you styled in your tag which takes precedent.

    order of Styling to take effect:
    styling in your tag
    styling in your head tag
    styling in your external file

    Floating left will make the div, well float left…..

    a bit like you haveing a small box on a shelf, you push it to the left, then you have another small box, and you put that on the shelf and push that to the left as far as it can go…right up to the first box, etc etc

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

You must be logged in to reply to this topic.

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