This is Interesting: Free Magazines for Graphics designers and webmasters  


Home > Archive > Stylesheets > May 2005 > layout within <td>





You are viewing an archived Text-only version of the thread. To view this thread in it's original format and/or if you want to reply to this thread please [click here]

Author layout within <td>
Radek

2005-05-10, 7:34 pm

How can I get the following to appear on just 1 line?

<style type="text/css">
#center { text-align: center;}
#left { text-align: left;}
#right {text-align: right}
</style>

<table border=1 width=200>
<tr>
<td>
<div id="left">left
<div id="center">center
<div id="right">right
</td>
</tr>
</table>

I tried using "display:inline" and play with "float" property but
couldn't get it to work right.
Thanks!

Radek

Jan Roland Eriksson

2005-05-10, 7:34 pm

On 10 May 2005 08:14:39 -0700, "Radek" <radek.mista@firstlogic.com>
wrote:

>How can I get the following to appear on just 1 line?


You want to be spoonfed?

Note that it is highly recommended to stay away from pixel sized
elements in a real design.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Your own title here</TITLE>
<style type="text/css">
body {
margin: 0; border: none; padding: 0;
font-size: 100%;
}
table {
margin: 0; padding: 0;
border: solid 1px #000000;
}
td {
margin: 0; border: none; padding: 0;
width: 210px;
}
.left {
margin: 0; border: none; padding: 0;
text-align: left; width: 70px; float: left;
}
.center {
margin: 0; border: none; padding: 0;
text-align: center; width: 70px; float: left;
}
.right {
margin: 0; border: none; padding: 0;
text-align: right; width: 70px; float: left;
}
</style>
</HEAD>
<BODY>
<table>
<tr>
<td>
<div class="left">left</DIV>
<div class="center">center</DIV>
<div class="right">right</DIV>
</td>
</tr>
</table>
</BODY>
</HTML>

--
Rex


Christoph Päper

2005-05-10, 7:34 pm

*Radek*:
> <tr><td>
> <div id="left">left
> <div id="center">center
> <div id="right">right
> </td></tr>


Any reason for not using three distinct table cells (or for not closing
your 'div' elements)?
Radek

2005-05-10, 7:34 pm

Thanks for your help! Not closing the <div> elements was my mistake
(sorry). Putting everything in 3 different table cells that's
unfortunately is not an option. I'd also want to stay away from
hardcoding the pixel sizes. I'd be happy with the output that I'm
getting in my original example if everything was simply on 1 line (I
though that's what "display:inline" was supposed to do but that doesn't
seem to be the case).

Christoph Päper

2005-05-14, 7:47 am

*Radek*:
> <tr><td>
> <div id="left">left
> <div id="center">center
> <div id="right">right
> </td></tr>


Any reason for not using three distinct table cells (or for not closing
your 'div' elements)?
Radek

2005-05-14, 7:47 am

Thanks for your help! Not closing the <div> elements was my mistake
(sorry). Putting everything in 3 different table cells that's
unfortunately is not an option. I'd also want to stay away from
hardcoding the pixel sizes. I'd be happy with the output that I'm
getting in my original example if everything was simply on 1 line (I
though that's what "display:inline" was supposed to do but that doesn't
seem to be the case).

Sponsored Links


Copyright 2003 - 2008 forum4designers.com  Software forum  Computer Hardware reviews