Table cell text align <div>?

Forum Moderators: not2easy

Message Too Old, No Replies

Table cell text align <div>?

DougWD

11:22 pm on Nov 9, 2005 (gmt 0)

I have a table with one cell. What I am trying to do is have two words in the same cell, one align right and the other align left, w/o breaking the table into 2 cells and applying to each cell alignment tags.

I've tried using div tags on each word and aligning that way, but it won't work. It's either left or right, but not both.

E.g.:

table with one cell: (table = [brackets indicate table])
[wordalignleft wordalignright]

That is it. Please help.

[edited by: DougWD at 11:25 pm (utc) on Nov. 9, 2005]

DougWD

11:24 pm on Nov 9, 2005 (gmt 0)

...

Fotiman

11:55 pm on Nov 9, 2005 (gmt 0)

You mean like this?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>Weird table ideas/title>
</head>
<style type="text/css">
table { width: 100%; }
td { border: 1px solid black; text-align: right; }
td span { float: left; }
</style>
<body>
<table>
<tr>
<td><span>Left</span> Right</td>
</tr>
</table>
</body>
</html>

I'm not sure why you'd want to do that with table data... but it does what you want I think.

DougWD

2:28 am on Nov 10, 2005 (gmt 0)

Well, the reason I want to do this is simple. I want some text on the left side of the table, and some on the right. But relaly, it's a cell in a table that spans the width of the table. In the left of the cell is teh menu text link and in the right of the same cell is the date. The table, and thus cell, is 800 px wide. Just a really simply header at the top of the table. Does that make sense?

I mean that is a really basic layout. Old school would have the cell split into two cells with a style applied to the left and right. But I don't want to do that anymore. I'm moving away from tables. This is probably one of my last tabled sites, but I am learning CSS as I go. I knew tehre was a way to get text side by side using CSS and w/o tables, or CSS <div> type sites would be pretty useless.

I'll try what you have. I noticed you used span. Duh. I didn't even think about just applying a class to the text itself.

Last, thanks and yes that works. But can you tell me exactly what the float is doing here? I've used float before for wrapping text around objects, but never like that. And if you didn't do it the way you have it, how else would you do something like that?

Thanks much!

DougWD

2:49 am on Nov 10, 2005 (gmt 0)

It's not working like I want it. The alignment works, but the "right" text is dropping below the left text. Here is the table td, and the css that aplies to it below it:

<td colspan="2" class=tdmenu> <a href="index.html">HOME</a> <a href="information/index.html">INFORMATION</a> <a href="services/index.html">SERVICES</a> <a href="contact/index.html">CONTACT </a><span class="flotright">Right </span></td>

external CSS for td and flotright class above:
td.tdmenu {
padding-bottom: 18px;
margin: 0px;
padding-left: 20px;
padding-top: 1px;
vertical-align: top;
}
.flotright {
float: right;
}

I don't know why it is not staying "top".

SuzyUK

8:43 am on Nov 10, 2005 (gmt 0)

The floated bit has to come first, it floats then the following text slots in beside it.. You could either float your left section left or put the right floated bit first in the source code.

floating an element also makes it block level by default.. so if it comes second in the source it will take up a "new line"

drhowarddrfine

1:39 pm on Nov 10, 2005 (gmt 0)

This does the same thing :)

<!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:utf-8">
<title>Weird table ideas</title>
<style type="text/css">
div { border: 1px solid black; text-align: right; }
span { float: left; }
</style>
</head>
<body>
<div>
<span>Left</span> Right
</div>
</body>
</html>

DougWD

9:35 pm on Nov 10, 2005 (gmt 0)

Suzy and Howard, yes good info. I was wondering about how I would do that w/o any tables. So Howard, are you saying that when you get rid of tables altogether, the "float" doesn't need to come first, as Suzy has it?

OK I'm not sure what you are doing here Suzy. I moved the CSS to the top of the external CSS page, but same result. Scroll down to the <td> in question. Here is the whole page with the external css afterwards:

External CSS follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Consultants</title>
<link href="css01.css" rel="stylesheet" type="text/css">
</head>
<table border="0" cellpadding="0" cellspacing="0" class=maintable>
<tr>
<td colspan="2" class=maintoptd><p><img src="images/main.gif" width="800" height="153"></p> </td>
</tr>
<tr>

<td class=tdmenu colspan="2"><a href="#">HOME</a> <a href="#">INFORMATION</a> <a href="#">SERVICES</a> <a href=#">CONTACT</a> <span class="alignright">test</span></td>

</tr>
<tr>
<td class=maintdleft> <p><img src="images/left.jpg" width="150" height="216" class="imageborder"></p>
<p><img src="certs.gif" width="150" height="348"></p></td>
<td class=maintdright><p>

</p>
<p class="maintextbox">insert foo text</p>
<p class="maintextbox"> </p>
<p class="maintextbox"> </p></td>
</tr>
<tr>
<td colspan="2" class=bottdinfo><p>home � information � services � contact</p>
<p>company COPYRIGHT 1995-2007</p>
<p><a href="#">web info</a></p></td>
</tr>
</table>
<p> </p>
<p> </p>

</body>

</html>

External CSS:

.alignright {
float: right;
}
table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
vertical-align: top;
}
body {
margin-top: 35px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding: 0px;
width: 800px;
background-image: url(images/bg.gif);
background-repeat: repeat;
}
a:link {
font-weight: bold;
color: #0000FF;
text-decoration: none;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
padding-left: 2px;
padding-right: 2px;
text-align: center;
}
a:visited {
font-weight: bold;
color: #0000FF;
text-decoration: none;
text-align: right;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
padding-left: 2px;
padding-right: 2px;
}
a:hover {
font-weight: bold;
color: #000000;
background-color: #CCCCCC;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #0033FF;
border-bottom-color: #0033FF;
padding-left: 2px;
padding-right: 2px;
}
p {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 7px;
margin-left: 0px;
}
td {
vertical-align: top;
}
td.maintdleft {
padding-left: 11px;
padding-right: 11px;
border-right: 1px solid #FFFFFF;
vertical-align: top;
width: 136px;

}
img.imgbotspace {
padding-bottom: 5px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
}

td.maintdright {
width: 624px;
padding-left: 10px;
padding-bottom: 30px;

}
td.tdmenu {
padding-bottom: 16px;
margin: 0px;
padding-left: 20px;
padding-top: 1px;
vertical-align: top;
}
table.maintable {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
vertical-align: top;
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
}
td.maintoptd {

}
td.bottdinfo {
padding-left: 20px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
vertical-align: middle;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;

}
.maintextbox {
width: 600px;
margin-right: auto;
margin-left: auto;
font-weight: bold;
}
div {
padding: 0px;
margin: 0px 20px;
}
.imageborder {
border: 1px solid #000000;
}

.alignleft {
text-align: left;
width: auto;
}

[edited by: SuzyUK at 9:06 am (utc) on Nov. 11, 2005]
[edit reason] removed specifics & URLs : see TOS #13 [WebmasterWorld.com] [/edit]

drhowarddrfine

4:35 am on Nov 11, 2005 (gmt 0)

She said if you floated it right. I floated it left.

DougWD

4:52 am on Nov 11, 2005 (gmt 0)

OK I floated the td left now also and used text align right. With text align right, the text stays left but does not take up another line. With float right applied, it does align right but still takes up the next line.

Here is the stuff:

<td class=tdmenu colspan="2"><a href="index.html">HOME</a> <a href="information/index.html">INFORMATION</a> <a href="services/index.html">SERVICES</a> <a href="contact/index.html">CONTACT</a> <span class="alignright">test</span></td>

CSS:

td.tdmenu {
padding-bottom: 16px;
margin: 0px;
padding-left: 20px;
padding-top: 1px;
vertical-align: top;
float: left;
}

.alignright {
text-align: right;
}

tomda

4:57 am on Nov 11, 2005 (gmt 0)

DougWD,
Have a look at :
[webmasterworld.com...]

There are explanation and few examples on how to align a text to the left and a text to the right in a SINGLE line!

Hope this help

Tomda

DougWD

5:42 am on Nov 11, 2005 (gmt 0)

Tom thanks I just read through it. I think some of my problem is that I have a slass redefining a specific <td>, and in that smae <td> I want a smae line text aligned right. Perhaps CSS is not even capable of that.

It is quite amazing to me that CSS makes it difficult to put two pieces of text on the same line while aligning them differently. I mean how would one go about creating columns with different alignments? Strange. No wonder so many people are still using tables. Sheesh.

DougWD

5:55 am on Nov 11, 2005 (gmt 0)

OK I got it. It was the td class tag interfering. Once I simply applied span tags and align left and right both floated, it worked. But I'm curious if this is breaking rules.

Here is the CSS:
.alignright {
float: right;
}
.alignleft {
float: left;
}

Why would align right not work with this appplied to the td class:

td.tdmenu {
padding-bottom: 16px;
margin: 0px;
padding-left: 20px;
padding-top: 1px;
vertical-align: top;
float: left;
}
Thanks