How to create this using css only

MySchizoBuddy

Its looking crap here but you get the idea. How can I create this layout using only CSS. Dunno why is it inserting so many br tags :S

Start	Date	Time
	e.g. 15/1 or Jan 15	e.g. 5pm
End	Date	Time
	e.g. 15/1 or Jan 15	e.g. 5pm

WallPhone

It's easier if you start with semantic HTML first, break the pieces into an outline with related items together:

Start

Date
e.g. 15/1 or Jan 15

Time
e.g. 5pm

End

Date
e.g. 15/1 or Jan 15

Time
e.g. 5pm

Stay tuned for the CSS.

WallPhone

All the <BR>s in the above code don't belong... use block comment to get the pure source. The br's apparently shift the positions a bit when viewing directly in the browser.

Here's the CSS:dl dt { /* Make the start & end date blocks start flush left. */ clear: left; } dl dd { /* Align the date and time inputs side-by-side */ width: 35%; display: inline; float: left; padding: 0 6px } dl dd * { /* Stack all dd contents with equal width: */ display: block; width: 100%; }

MySchizoBuddy

Thanks Wallphone, I'll have to use li and span cause vanilla theme doesn't use dl tags

dan39

You should also take a look at both of these articles over at ALA: http://alistapart.com/articles/prettyaccessibleforms/ http://alistapart.com/articles/makingcompactformsmoreaccessible Both of these articles are great resources for good styling of forms while keeping the markup sound.