This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Webmaster forum > July 2005 > How to left and right align 2 pieces of content on 1 line ?
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 |
How to left and right align 2 pieces of content on 1 line ?
|
|
| Marc Bissonnette 2005-07-27, 8:19 pm |
| Hi all;
I'm guessing this is possible with some form of CSS, but not quite sure how
to google properly for it.
I've got a page laid out in a table. (Yes, bad, I know - I'm going with
what I'm familiar with)
I want to avoid a ton of nested tables. - I need to accomplish having a
short bit of text on the left of a cell with the "more..." link/text right-
aligned - Could a helpful soul either tell me how to do this or point me to
the resource where I can read/learn about it ?
The content is drawn from a db, so the length of the left side content is
not constant.
Just to be clear, I want to end up with:
---------------------------------------
| |
|Fair this weekend More|
| |
---------------------------------------
--
Marc Bissonnette
CGI / Database / Web Management Tools: http://www.internalysis.com
Looking for a new ISP? http://www.canadianisp.com
| |
|
|
"Marc Bissonnette" <dragnet@internalysis.com> wrote in message
news:Xns96A08384983D8dragnetinternalysisc@207.35.177.135...
> Hi all;
>
> I'm guessing this is possible with some form of CSS, but not quite sure
how
> to google properly for it.
>
> I've got a page laid out in a table. (Yes, bad, I know - I'm going with
> what I'm familiar with)
> I want to avoid a ton of nested tables. - I need to accomplish having a
> short bit of text on the left of a cell with the "more..." link/text
right-
> aligned - Could a helpful soul either tell me how to do this or point me
to
> the resource where I can read/learn about it ?
>
> The content is drawn from a db, so the length of the left side content is
> not constant.
>
> Just to be clear, I want to end up with:
>
> ---------------------------------------
> | |
> |Fair this weekend More|
> | |
> ---------------------------------------
Just a quick guess, but two div's set to div align=" " for each.
--
Allis MACAttack
http://themooseisloose.net
| |
| GreyWyvern 2005-07-27, 8:19 pm |
| And lo, Marc Bissonnette didst speak in alt.www.webmaster:
> Just to be clear, I want to end up with:
>
> ---------------------------------------
> | |
> |Fair this weekend More|
> | |
> ---------------------------------------
<style type="text/css">
table {
width:40%;
}
table tbody tr td {
text-align:left;
vertical-align:middle;
height:100px;
}
table tbody tr td a.more {
display:block;
float:right;
margin:1px 1px 3px 3px;
}
</style>
....
<table cellspacing="0" border="1">
<tbody>
<tr>
<td>
<a href="URI" class="more">More</a>
<p>
Fair this weekend
</p>
</td>
</tr>
<tr>
<td>
<a href="URI" class="more">More</a>
<p>
Fair next weekend with a some dummy text.
Fair next weekend with a some dummy text.
Fair next weekend with a some dummy text.
</p>
</td>
</tr>
</tbody>
</table>
Grey
--
The technical axiom that nothing is impossible sinisterly implies the
pitfall corollory that nothing is ridiculous.
- http://www.greywyvern.com - Orca Knowledgebase: Completely CSS styleable
Knowledgebase/FAQ system
| |
| William Tasso 2005-07-27, 8:19 pm |
| Writing in news:alt.www.webmaster
From the safety of the Bell Sympatico cafeteria
Marc Bissonnette <dragnet@internalysis.com> said:
> Hi all;
>
> I'm guessing this is possible with some form of CSS, but not quite sure
> how
> to google properly for it.
>
> I've got a page laid out in a table. (Yes, bad, I know - I'm going with
> what I'm familiar with)
> I want to avoid a ton of nested tables. - I need to accomplish having a
> short bit of text on the left of a cell with the "more..." link/text
> right-
> aligned - Could a helpful soul either tell me how to do this or point me
> to
> the resource where I can read/learn about it ?
>
> The content is drawn from a db, so the length of the left side content is
> not constant.
>
> Just to be clear, I want to end up with:
>
> ---------------------------------------
> | |
> |Fair this weekend More|
> | |
> ---------------------------------------
ok - there must be a million and one ways to skin this particular cat. My
favourite (because it is the simplist) is like so ...
div p.more {text-align:right;}
<div>
<p>Fair this weekend</p>
<p class="more">Some meaninful text that leads on to 'more...'</p>
</div>
However, this simple approach will position 'more' beneath the main text.
To align them horizontally ...
div p.more {float:right;}
<div>
<p class="more">Some meaninful text that leads on to 'more...'</p>
<p>Fair this weekend</p>
</div>
However, I'm not too keen on this because the 'more' text is placed before
the main text.
Have fun.
--
William Tasso
** Business as usual
| |
| Marc Bissonnette 2005-07-27, 8:19 pm |
| "Allis" <allis@allis> wrote in news:95-dnRFiGd28XXrfRVn-gw@comcast.com:
>
> "Marc Bissonnette" <dragnet@internalysis.com> wrote in message
> news:Xns96A08384983D8dragnetinternalysisc@207.35.177.135...
> how
> right-
> to
>
> Just a quick guess, but two div's set to div align=" " for each.
Does the alignment fine, but puts em on two different lines :(
<DIV ALIGN=LEFT>Fair This Weekend</DIV><DIV ALIGN=RIGHT>More</DIV>
Produces:
---------------------------------------
| |
|Fair this weekend |
| More|
---------------------------------------
Also tried wrapping both DIVs in a master div, but no difference.
--
Marc Bissonnette
CGI / Database / Web Management Tools: http://www.internalysis.com
Looking for a new ISP? http://www.canadianisp.com
| |
| Marc Bissonnette 2005-07-27, 8:19 pm |
| GreyWyvern <spam@greywyvern.com> wrote in
news:op.suk16wslsl6xfd@news.nas.net:
> And lo, Marc Bissonnette didst speak in alt.www.webmaster:
>
>
>
> <style type="text/css">
>
> table {
> width:40%;
> }
> table tbody tr td {
> text-align:left;
> vertical-align:middle;
> height:100px;
> }
> table tbody tr td a.more {
> display:block;
> float:right;
> margin:1px 1px 3px 3px;
> }
>
> </style>
>
> ...
>
> <table cellspacing="0" border="1">
> <tbody>
> <tr>
> <td>
> <a href="URI" class="more">More</a>
> <p>
> Fair this weekend
> </p>
> </td>
> </tr>
> <tr>
> <td>
> <a href="URI" class="more">More</a>
> <p>
> Fair next weekend with a some dummy text.
> Fair next weekend with a some dummy text.
> Fair next weekend with a some dummy text.
> </p>
> </td>
> </tr>
> </tbody>
> </table>
Ahh! Many thanks, Grey!
I had to do some fiddling around to get it to work in my application,
since the need appears in different table cells; one within a blockquote
and one without. This little excercise has shown me that the DIVs and CSS
are a lot easier to make massive changes across the board over individual
table cell content spacings.
Thanks again!
--
Marc Bissonnette
CGI / Database / Web Management Tools: http://www.internalysis.com
Looking for a new ISP? http://www.canadianisp.com
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|