CSS Layout - Simulated table cells

[JeffChastain]

I am playing with using CSS for all of my layouts - i.e. no tables. I am needing to simulate the effect of having a table row split into two cells and I am running into problems.

I have a <div representing a page header. I need to split that header into two pieces - one aligned left, and one aligned right. The table code I would use would be as follows ...

<table ...
<tr>
<td align=left&quot; valign=&quot;middle&quot;>Left Cell Content</td>
<td align=&quot;right&quot; valign=&quot;middle&quot;>>Right Cell Content</td>
</tr>
</table>

So how do I do this in CSS? This does not appear to work.

<div id=&quot;header&quot;>
<span style=&quot;text-align: left; vertical-align: middle;&quot;>Left Cell Content</span>
<span style=&quot;text-align: right; vertical-align: middle;&quot;>Right Cell Content</span>
</div>

Thanks
-- Jeff

 

[palbano]

Alignment only works in block elements. <span/> is an inline element. Some browsers support CSS styles promoting inline elements to block elements by assigning them width and height properties.

<span style=&quot;width:300;height:50;text-align:left&quot;>Hello</span>

Hope this helps
-pete

 

[cian]

Hi,

Try float for the spans. This will float the entire to whatever side, left or right, that you specify.

Also, use DIV instead of SPAN. And if you are using DIV's you will need to specify their size so they can fit side by side.


::

http://www.endamcg.com

::

http://www.endamcg.com/finland-gaa

 

[petey]

I often use something like this to achieve that effect:

-------CSS---------

<style>
div#banner img#logo { float: right; }
</style>

-------HTML--------

<div id=&quot;banner&quot;>
<img id=&quot;logo&quot; alt=&quot;logo&quot; src=&quot;logo.gif&quot; />
<h1>MySite.com</h1>
</div>

petey

 

[JeffChastain]

That was what I was looking for, thanks.