By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,677 Members | 1,798 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,677 IT Pros & Developers. It's quick & easy.

About ready to give up CSS positioning...

P: n/a
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>
Jan 14 '08 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Scripsit Slick50:
I am about ready to finally give up on CSS and fall back to tables.
Maybe you should learn the difference between HTML and CSS, so that you
could post to the right group.
div.row {width: 800px;}
It doesn't matter that much how you do it - tables, positioning,
whatever. What matters is what you are doing, and now you're doing the
wrong thing. You're trying to force a fixed width, and a large width at
that - why would I need to set my browser to use such a wide window just
to fill out a stupid form?

You actually need to give up web authoring until you've learned the
basics properly.

If problems remain, select the right group and post the URL.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jan 14 '08 #2

P: n/a
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.
Jan 14 '08 #3

This discussion thread is closed

Replies have been disabled for this discussion.