About ready to give up CSS positioning...

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
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

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 <textarea> input 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 <span> text to be contained in the 300px remaining in the
<div>. I have tried floating a <div> containing the <span> to 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;}


<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

Re: About ready to give up CSS positioning...

Quoted text here. Click to load it

When I read the snippet of code you provided, all I see is a left-
floated label... this is hardly what true CSS positioning is about.

Quoted text here. Click to load it

I see no form whatsoever in the chunk of code that you chose to
provided in your post.

Quoted text here. Click to load it

How long is too long? ...in relative terms with respect to the
webpage, browser viewport, etc.?

Quoted text here. Click to load it

So where can we verify this, test this exactly? In which browser and
browser version is this happening? Are you using valid markup code?
Are you using valid CSS code? Are you triggering standards compliant
rendering mode? You do want the webpage to be using standards
compliant rendering mode in all modern browsers which can trigger that
rendering engine, right?


Quoted text here. Click to load it

Is there something replacing those question marks or did you just
assume that these were not important to mention with your post?

Realistically speaking, do you really, truly expect someone to figure
out everything about your webpage problem just by looking at 4 rules
and 4 lines of markup code?

Quoted text here. Click to load it

I wondered why you used a label while not using its accessibility
feature: this is clearly a missed opporunity of using the label
element for what it was designed to do in the first place.

Let me try to get this straight. The textarea should be using only 1
column but, it seems, it should also be 300px wide: this is what you
want, right?

You used the name attribute for that textarea and not the id
attribute. textarea#reason will not be supported - and rightly so - by
many browsers.

Quoted text here. Click to load it

Why is that span supposed to wrap? ... when we don't even have a clue
as to what the class error may be have for CSS declarations?
Realistically speaking, how are we exactly supposed to know what is
the class error about?

Is it possible for you to upload the whole HTML document into a web-
accessible webpage on the web and then post, just post and url? Make
sure it is using entirely valid markup and CSS code first.

HTML validator
http://validator.w3.org /

CSS validator
http://jigsaw.w3.org/css-validator /

Regards, G=E9rard

Re: About ready to give up CSS positioning...

Scripsit Slick50:

Quoted text here. Click to load it

Maybe you should learn the difference between HTML and CSS, so that you
could post to the right group.

Quoted text here. Click to load it

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")

Re: About ready to give up CSS positioning...

Quoted text here. Click to load it

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

<div class="middleBit">
    <textarea ... ></textarea>
<span class="error"...>...</span>

Then set

    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.

Re: About ready to give up CSS positioning...

Slick50 wrote:
Quoted text here. Click to load it

Anything in any field of endeavor is frustrating for the novice.
Developing familiarity and facility is what distinguishes the novice
from the experienced practitioner. Don't give up!

Quoted text here. Click to load it

If the arrangement you say you want for one row is really what you want
for all rows--a label, a control, and then additional commentary, then
this *is* logically a table, and you should feel free to use a table to
organize it.

Site Timeline