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

[pepperduck]

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?

[ikthius]

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

[Author]

Posts