css left and right align on one row

[PeDa]

Struggling to achieve the following using CSS:

<table>
<tr>
<td><img src='gif/bullet.gif' alt='*'><a href='index.htm'>Home</a><img src='gif/bullet.gif' alt='*'></td>
<td align=right><img src='gif/bullet.gif' alt='*'><a href='search.htm'> Search this site </a><img src='gif/bullet.gif' alt='*'></td>
</tr>
</table>

On one line:
- against the left margin: * Home *
- against the right margin: * Search this site *
Table width variable

 

[ChrisHirst]

nth-child
nth-child

even & odd rules

nth-of-type
nth-of-type




Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[PeDa]

Thank you. It does seem that CSS is rather convoluted here.

Peter

 

[ChrisHirst]

Not necessarily convoluted, just more than one way to skin the proverbial cat.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[vacunita]

With a table? Or some other markup?

You may find that a float should work in most circumstances though.

<div id="container"><p class="right"><img src='gif/bullet.gif' alt='*'><a href='search.htm'> Search this site </a><img src='gif/bullet.gif' alt='*'></p><p class="left"><img src='gif/bullet.gif' alt='*'><a href='index.htm'>Home</a><img src='gif/bullet.gif' alt='*'></p></div>

div#container
{
[indent]overflow:hidden;[/indent]
}
div#container p.right
{
[indent]float:right;[/indent]
}

div#container p.left
{
[indent]float:left;[/indent]
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech