[RESOLVED] alignment of text in table columns

**shashgo** · 03-30-2006 03:08 PM

How do you align parts of text but not the whole thing? for example if my source code is
<tr><td>Bobby Rompel</td></tr>
How do I make it so that the "Bobby" is aligned at the left of the column and "Rompel" at the right?

Also if I have something like
<input type="textbox" name="hm">

how do I make it span the entire width of the page. I tried using something like size="100%" but it doesnt work. And if I type size="100" then it'll occuppy exactly 100 spaces, then what is the screen size is bigger or smaller?

**Kravvitz** · 03-30-2006 03:30 PM

Use floats.

http://css.maxdesign.com.au/floatutorial/index.htm
http://www.brunildo.org/test/#flo

http://garyblue.port5.com/webdev/floatdemo.html
http://www.csscreator.com/attributes/containedfloat.php
http://www.positioniseverything.net/easyclearing.html
http://www.quirksmode.org/css/clearing.html
http://css-discuss.incutio.com/?page=ClearingSpace

Curing Float Drops and Wraps

http://www.alistapart.com/articles/negativemargins/
http://www.alistapart.com/articles/practicalcss/
http://www.alistapart.com/articles/journey/

Code:

<input type="textbox" name="hm" style="width:100%;">

**shashgo** · 03-30-2006 04:02 PM

Thanks, it does work.
What if I have some text already on a line and I want the text box to span the rest of the line, can that be done?

So if I want to do something like
blahblahblah<input type="text" >
what would I do?

Also, can this technique also be applied to text areas, so that I can have a text area span the entire width of a table or page?

**Kravvitz** · 03-30-2006 04:48 PM

Yes, it should work on <textarea>s too.

Try this.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">

label span {
  float: left;
}

span.maxAvailWidth {
  margin-left: 7em;
  display: block;
  width:auto;
  float: none;
  background-color: #f00;
}
span.maxAvailWidth input {
  width: 95.9%;
}

</style>
</head>
<body>

<form action="#"><div>
<label><span>label</span>
<span class="maxAvailWidth"><input type="text"></span></label>
</div></form>

</body>
</html>

**nitrexoxide** · 04-01-2006 02:17 AM

a simple way would be to do this:

<div align="left">Bobby</div> <div align="right">Rompel</div>

It wont validate with XHTML Strict though

**shashgo** · 04-01-2006 09:28 AM

Nitrexodide,

Wont what you suggested do something like

Bobby

Rompel

Because dont divs have built in line feeds?

Thread: [RESOLVED] alignment of text in table columns

Thread Tools

Display

[RESOLVED] alignment of text in table columns

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions