473,734 Members | 2,460 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

About ready to give up CSS positioning...

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 <textareainpu t 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 <divcontainin g 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"><la bel class="label">P lease provide a reason:</label>
<textarea name="reason" rows="5" cols="1" class="input"></textarea>
<span class="error">T his is a small bit of text which is supposed to
wrap</span>
</div>
Jan 14 '08 #1
2 2472
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
On 2008-01-14, Slick50 <sc****@frontie rnet.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 <textareainpu t 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 <divcontainin g 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"><la bel class="label">P lease provide a reason:</label>
<textarea name="reason" rows="5" cols="1" class="input"></textarea>
<span class="error">T his 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="middleBi t">
<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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
2842
by: eScrewDotCom | last post by:
eScrew Welcome to eScrew! eScrew is eScrew and this is eScrew story. eScrew will tell you eScrew story if you promise eScrew to consider eScrew story as joke. eScrew story is very funny. eScrew story is so funny that eScrew will have to take break from time to time because eScrew needs some rest from laughing. Oh boy, here it comes... eScrew funny laugh laughing screaming crying must stop can not take any more this is killing eScrew...
8
2461
by: eScrewDotCom | last post by:
eScrew Welcome to eScrew! eScrew is eScrew and this is eScrew story. eScrew will tell you eScrew story if you promise eScrew to consider eScrew story as joke. eScrew story is very funny. eScrew story is so funny that eScrew will have to take break from time to time because eScrew needs some rest from laughing. Oh boy, here it comes... eScrew funny laugh laughing screaming crying must stop can not take any more this is killing eScrew...
125
14802
by: Sarah Tanembaum | last post by:
Beside its an opensource and supported by community, what's the fundamental differences between PostgreSQL and those high-price commercial database (and some are bloated such as Oracle) from software giant such as Microsoft SQL Server, Oracle, and Sybase? Is PostgreSQL reliable enough to be used for high-end commercial application? Thanks
5
2999
by: eScrewDotCom | last post by:
www.eScrew.com eScrew Welcome to eScrew! eScrew is eScrew and this is eScrew story. eScrew will tell you eScrew story if you promise eScrew to consider eScrew story as joke. eScrew story is very funny. eScrew story is so funny that eScrew will have to take break from time to time because eScrew needs some rest from laughing. Oh boy, here it comes... eScrew funny laugh laughing
3
1997
by: Jack | last post by:
On the 1st of January 1998, Bjarne Stroustrup gave an interview to the IEEE's 'Computer' magazine. Naturally, the editors thought he would be giving a retrospective view of seven years of object-oriented design, using the language he created. By the end of the interview, the interviewer got more than he had bargained for and, subsequently, the editor decided to suppress its contents, 'for the good of the industry' but, as with many of...
0
2455
by: eScrewDotCom | last post by:
eScrew Welcome to eScrew! eScrew is eScrew and this is eScrew story. eScrew will tell you eScrew story if you promise eScrew to consider eScrew story as joke. eScrew story is very funny. eScrew story is so funny that eScrew will have to take break from time to time because eScrew needs some rest from laughing. Oh boy, here it comes... eScrew funny laugh laughing screaming crying must stop can not take any more this is killing eScrew...
33
3160
by: Lalatendu Das | last post by:
Dear friends, I am getting a problem in the code while interacting with a nested Do-while loop It is skipping a scanf () function which it should not. I have written the whole code below. Please help me in finding why such thing is happening and what the remedy to it is. Kindly bear with my English. int main ()
4
2109
by: Alan Silver | last post by:
Hello, Having been a light reader of this ng for a few months now (after several years absence), I have noticed that absolute positioning seems to be considered a Very Bad Thing around here. Generally, when someone posts a question about a design that uses it, they are told not to. Now, in my ignorance, I don't see what's wrong with it, when used sensibly. Let me say straight off that I am *not* talking about trying to produce...
0
9317
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9248
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9187
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8192
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6743
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6040
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4555
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
2
2734
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2184
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.