On 2008-01-14, Slick50 <sc****@frontiernet.netwrote:
I am about ready to finally give up on CSS and fall back to tables.
Positioning is becoming too frustrating for the novice with CSS
alone...
I have a simple form. Conceptually I divide up each input of user
information into rows. On one particular row I want a label to be
displayed on the left, a <textareainput in the middle, and some text
on the right - all on the same line. This all seems to work fine until
the text on the right becomes too long. The text wraps below the label
on the next line. Instead what I'd like to do is to wrap the text in a
box which stays on the right, adjacent to the textarea to its left.
I want the <spantext to be contained in the 300px remaining in the
<div>. I have tried floating a <divcontaining the <spanto the
right, but it wants to drop to the next line.
Here is a snippet of my code. If this is not enough, I would
appreciate your advice in general terms. Thanks.
div.row {width: 800px;}
label {float: left; width:200px;}
textarea#reason {width: 300px;}
span.error {???;}
...
<div class="row"><label class="label">Please provide a reason:</label>
<textarea name="reason" rows="5" cols="1" class="input"></textarea>
<span class="error">This is a small bit of text which is supposed to
wrap</span>
</div>
Basically you need to give the thing on the right a width too. Otherwise
it takes whatever width it wants up to the full width available (that's
the full 800px in this case, not the gap to the right of the textarea),
dropping down if necessary.
Now you may well still find that span.error goes a line below the
textarea. Firefox and IE7 both do that: they always put a float after
inline stuff on the next line.
You could move the span to before the textarea in the source, so the two
floats are at the beginning. Or perhaps easier to do something like
this:
<label...>...</label>
<div class="middleBit">
<textarea ... ></textarea>
</div>
<span class="error"...>...</span>
Then set
..middleBit
{
margin-left: 200px;
margin-right: 300px;
}
Assuming you've set span.error to width: 300px. Ideally instead of the
div, you ought to be able to just set textarea to display: block and
apply the margins directly to it. But browsers don't always respond too
well to styling UI-widget replaced elements. Try it and if it doesn't
work, use the div.
If you want span.error to be the "fluid" one rather than the middle
section, make the label and middleBit both left floats, set widths on
both of them, and put the block on the right, with a left margin big
enough for both of the left floats.
You'll also want "clear:both" on div.row.
