/    Sign up×
Community /Pin to ProfileBookmark

Row Heights

Copy linkTweet thisAlerts:
Dec 03.2006

I’m trying to convert a form from table to css
However, one column contains text and the other got input boxes.
The problem is that the vertical height of each is not the same so they don’t line up (vertically).
How to I fix that?

to post a comment
CSS

17 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Dec 03.2006 — Example of what you've got?
Copy linkTweet thisAlerts:
@yitzleauthorDec 03.2006 — http://jesa.skule.ca/test.html

http://jesa.skule.ca/eg.png

[img=http://jesa.skule.ca/eg.png]

[img]http://jesa.skule.ca/eg.png[/img]
Copy linkTweet thisAlerts:
@ray326Dec 03.2006 — Ok, your structure isn't right. You need row by row divs to get the alignment better. I like this pattern.

<div><label for="field">labeltext</label><input type="text" id="field" name="field"></div>

Other folks prefer.

<label>labeltext<input type="text" name="field"></label>
Copy linkTweet thisAlerts:
@yitzleauthorDec 03.2006 — That defeats the whole point of the divs.

I switched over to get the inputs aligned...

With row divs I lose the alignment which I had with tables.
Copy linkTweet thisAlerts:
@ray326Dec 04.2006 — That defeats the whole point of the divs.[/QUOTE]That makes no sense to me.
With row divs I lose the alignment which I had with tables.[/QUOTE]Are you talking about columnar alignment now? That's simply label/element styling.
Copy linkTweet thisAlerts:
@yitzleauthorDec 04.2006 — I guess it is just a label/element.

But can I make the elements all align along the same edge?
Copy linkTweet thisAlerts:
@ray326Dec 05.2006 — No no no. The markup is still very wrong. One label per input and just make the '*' part of the label string. Also, no font tags. Use a style to make the "*" (the first letter) red.
Copy linkTweet thisAlerts:
@yitzleauthorDec 05.2006 — Can't I label a label? I want to line up the first word regardless of whether it has a '*' before it.

And how do I apply a style to just the '*'? Span?

EDIT:

OK. We got ":first-letter" pseudo elements and color tags.

But not all lines start with a red '*'
Copy linkTweet thisAlerts:
@yitzleauthorDec 05.2006 — Got the first part, too. I can add a '*' to all labels and make so the same color as the background.
Copy linkTweet thisAlerts:
@ray326Dec 05.2006 — Bingo. And if IE wasn't crap you could actually add the "*" with a style. In fact, what I do is define a .required class and do the first letter red with that. This is one place where you can't really separate the presentation and content thanks to Microsoft.
Copy linkTweet thisAlerts:
@yitzleauthorDec 05.2006 — Still not going...

The first-letter isn't working.

And to align the inputs I need to use "left", right?

But left only works if I have a position tag set. relative doesn't have the right result and absolute messes up the vertical alignment.
Copy linkTweet thisAlerts:
@ray326Dec 05.2006 — The trouble you're having is exactly why I prefer the div/label/input pattern I use. Then this kind of styling starts putting things in the right place for you.

label { color: brown; margin-left: 1ex; display:block; width:15em; float:left }

label:first-letter { color: green; }

label.required:first-letter { color: red; }

label.notrequired { color: grey; }
Copy linkTweet thisAlerts:
@yitzleauthorDec 05.2006 — I'll rewrite in div/label/input

With the display:block I get the first-letter working and the inputs aligned. But it forces a newline between the label and input. With display:inline I do not get the firstletter color and the width is not uniform (ie the inputs don't line up)
Copy linkTweet thisAlerts:
@ray326Dec 05.2006 — Inlines cannot have width. If you float the label the input should follow it on the line as long as the screen is wide enough. Wrapping the line in a div allows you to set the width of the div such that wrapping never occurs.
Copy linkTweet thisAlerts:
@yitzleauthorDec 07.2006 — Yay. I used floats with set widths and it all now works. Thanks for all the help!

Now I got to kill those tables on my home page ?

Thanks for all the help!!
Copy linkTweet thisAlerts:
@ray326Dec 07.2006 — As Yogi might say, "Nothing succeeds like success." ?
×

Success!

Help @yitzle spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...