Tuesday, December 4, 2007

CSS table layout


div.row {
clear: both;
padding-top: 5px;
}

div.row span.label {
float: left;
width: 100px;
text-align: right;
}

div.row span.formw {
float: right;
width: 235px;
text-align: left;
}


Span is inline element, and text-align can only be used inside a block element to align its content. So why can we use it here? The secret is that with 'float' defined, span is escalated to block level element, as you implicitly added a "display: block" to it.

No comments: