What is the correct CSS to display 2 Tables within a Column

[WorldNews]

Hi,

1st, for pure CSS guys, a warning, this is about using CSS inside a Table. So please do not write to me about why I am not using pure CSS and mixing Tables & CSS, it is really needed for this purpose

With that said, I have Tables: Table-A and Table-B
I want to display Table-A at 20 pixels from the top of the column and Table-B at 20 pixels from the bottom of the column, what CSS code would one use for this purpose?

FYI, I tried this CSS to get the top Table 20 pixels from the top of the Column but instead it is floating at middle of the column.

	.top_hold {

		position: relative; 
		top: 20px; 
		width: 230px;

	}

and when I used this CSS code:

	.top_hold {

		position: absolute; 
		top: 20px; 
		width: 230px;

	}

it is even worst since then it displays the Table-A outside of the Column and relative to the top of the page rather than the top of the Column.

ThanX.

[ralphm]

A relatively or absolutely positioned element will be placed in relation to the nearest parent that has position relative or absolute. So the column itself needs position: relative on it, otherwise the positioned element will position itself in relation to the viewport.

Not sure if that will help, as the nature of the container isn’t clear, but worth a try, anyway.

[PaulOB]

Is the column a fixed height and are the tables a fixed height?

If the column is not a fixed height then it will have no bottom so the table will in effect be at the bottom of the column. If the column has a fixed height then as Ralph said you add position:relative to the column and then place the table absolutely at bottom:20px.

However as the table is now absolutely placed it will be removed from the flow and if any other content gets in the way (such as the table at the top) then they will both overlap. therefore you would need to ensure this didn’t happen which may not be possible if dealing with fluid content.

We may need to see exactly what you are trying to do to offer better advice though.

[WorldNews]

Hi,

You can see the page here:

RealNewsPost.com is for sale | HugeDomains

Note: this new home page is under design so many things are still not done.

So the issue in question is the column with heading of Advertising.
Inside this Table column are to be 3 Tables, and we would like
to set the position of these inner Tables in referenced to that last column with CSS. NOTE: right now the inner Tables are positioned with Table element height, so this would like to replace with CSS positioning relative to that last column.

@ralph_m

A relatively or absolutely positioned element will be placed in relation to the nearest parent that has position relative or absolute. So the column itself needs position: relative on it, otherwise the positioned element will position itself in relation to the viewport.

Not sure if that will help, as the nature of the container isn’t clear, but worth a try, anyway.

[WorldNews]

Hi,

Thanx for the info below. So in my last reply I submitted the new Home-page were this design is to be applied.

In answer to your main question, we need to have the Table columns not have fixed height but be adjusted as per the content that is inside them.

@Paul_O_B

Is the column a fixed height and are the tables a fixed height?

If the column is not a fixed height then it will have no bottom so the table will in effect be at the bottom of the column. If the column has a fixed height then as Ralph said you add position:relative to the column and then place the table absolutely at bottom:20px.

However as the table is now absolutely placed it will be removed from the flow and if any other content gets in the way (such as the table at the top) then they will both overlap. therefore you would need to ensure this didn’t happen which may not be possible if dealing with fluid content.

We may need to see exactly what you are trying to do to offer better advice though.

[PaulOB]

Hi,

From the sound of it what you want is not possible to in an automatic or fluid way unfortunately.

You can absolutely position a table at the bottom of that column but you can’t make sure that the table is going to clear other content unless you know its height in advance and then you can protect other elements with some matching padding.

This link explains the method and the drawbacks.

You can use the same technique as above to place your tables but it will need to follow the same principles.

There is no way to have a fluid height element at the bottom of the column when there is other content in that column that might get in the way. (It isn’t even possible using tables although you could vertically align content to the bottom but you couldn’t have one element at the top and one at the bottom.)

Of course, you may be after something simpler and I have mis-understood

[WorldNews]

Hi,

1st, thanx for the info that you have provided already.
But I think you misunderstood what I want to do. Or I wrote it badly.

So we have a mail Table, this Table has 3 columns, last column is the Advertising Column, which again you can see here:

RealNewsPost.com is for sale | HugeDomains

In this 3rd column, the Advertising column, we have the Paid Advertisers Keyword based which are to be at the Top of the Column, Paid Advertisers ad banner based which are to be in the middle of the column and the Free Ads which are to be at the bottom of the column.

So how can one achieve the above objective via CSS?

FYI, if I dont get the proper answer, the solution, to this question then I will be using <p><br> to separating these 3 segments from one another, but needless to say that is not an elegant solution since then the 3rd element, the Free Ads container that is, will not be flush with the bottom of that column which would be the best look.

ThanX,

@Paul_O_B

Hi,

From the sound of it what you want is not possible to in an automatic or fluid way unfortunately.

You can absolutely position a table at the bottom of that column but you can’t make sure that the table is going to clear other content unless you know its height in advance and then you can protect other elements with some matching padding.

This link explains the method and the drawbacks.

You can use the same technique as above to place your tables but it will need to follow the same principles.

There is no way to have a fluid height element at the bottom of the column when there is other content in that column that might get in the way. (It isn’t even possible using tables although you could vertically align content to the bottom but you couldn’t have one element at the top and one at the bottom.)

Of course, you may be after something simpler and I have mis-understood

[PaulOB]

Hi,

No I think I understood what you wanted but I don’t think its possible

The closest you can get is to stick to tables and create 3 rows but merge the rows in the first two columns and leave the last column in 3 cells which the table will equally distribute between the column height.

I’m not sure how this will pan out in a real situation but try this and see if it’s getting close to what you are asking.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table.threecol{margin:auto;}
.threecol td {
    vertical-align:top;
    width:320px;
    border:1px solid #000;
}
.threecol td.top{vertical-align:top;background:red}
.threecol td.mid{vertical-align:middle;background:bue}
.threecol td.base{vertical-align:bottom;background:green}

</style>
</head>
<body>
<table class="threecol" cellspacing="0" cellpadding="0">
    <tr>
        <td rowspan="3"><p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p>
            <p>Column 1</p></td>
        <td rowspan="3"><p>Column 2</p>
            <p>Column 2</p>
            <p>Column 2</p>
            <p>Column 2</p>
            <p>Column 2</p></td>
        <td class="top"><p>testing top cell</p>
            <p>testing top cell</p>
            <p>testing top cell</p></td>
    </tr>
    <tr>
        <td class="mid"><p>testing middle cell</p>
            <p>testing middle cell</p>
            <p>testing middle cell</p>
            <p>testing middle cell</p></td>
    </tr>
    <tr>
        <td class="base"><p>testing bottom cell</p>
            <p>testing bottom cell</p>
            <p>testing bottom cell</p>
            <p>testing bottom cell</p></td>
    </tr>
</table>
</body>
</html>

[WorldNews]

Hi,

Your suggestion actually works pretty well.
But there is 1 lil STRANGE Error!

Take a look at the new home page, here:
http://www.realnewspost.com/index-new.php

And you will see that the 2nd item in the 3rd column are:

<tr bgcolor="#ffffff">
		<td valign="middle" align="center" height="30">
		<div class="ad_head_top" style="font-size: 16px;">
			<a href="">Place My Ads Here</a>
			<p>
			<a href="">Donate</a>
		</div>
		
		</td>
	</tr>

However for some STRANGE reason the <a href=“”>Donate</a> is falling into the 3rd row rather than being part of the 2nd (Middle) row. What is up with that! Why is this item <a href=“”>Donate</a> in the 3rd row rather than being in the 2nd row where it is written to be?

Regards,

[ralphm]

@WorldNews

Why is this item <a href=“”>Donate</a> in the 3rd row rather than being in the 2nd row where it is written to be?

It’s spilling out, because you have a fixed height set on the table cell. If you remove height="30" from here:

<td valign="middle" [COLOR="Red"]height="30"[/COLOR] align="center">

it will be ok.

[WorldNews]

How did that height=“30” get there!
I didnt put it there!
Oh well, strange things happen
ThanX 2 U anyway.

@ralph_m

It’s spilling out, because you have a fixed height set on the table cell. If you remove height="30" from here:

<td valign="middle" [COLOR="Red"]height="30"[/COLOR] align="center">

it will be ok.

[system]

@WorldNews

1st, for pure CSS guys, a warning, this is about using CSS inside a Table. So please do not write to me about why I am not using pure CSS and mixing Tables & CSS, it is really needed for this purpose

Given the example link I am only left asking “REALLY NEEDED FOR WHAT?!?” Wasting bandwidth and development time for no reason? Flushing accessiblity and semantics down the toilet?

I mean, the only legitimate excuse I could find for that is if you’re building an e-mail, which you obviously are not. I’m actually interested in hearing what your excuse is for it being “really needed for this purpose” as there’s no reason even in tabular layouts to be using tables when you only have ONE TD per TR!!! That’s HTML 101. Basics of using tables – if it’s only one column you shouldn’t be using a table! EVEN when using tables for layout this:

		<tr bgcolor="#ffffff">
			<td height="5">
			</td>
		</tr>

Is so wrong on so many counts the only sane choice is to throw it ALL away and start over clean. If nothing else it might give you the 7-9k of markup you should have instead of the 17-18 you’re wasting your time with now. If nothing else the use of attributes like BGColor that have NO PLACE in your code if you are working after 2001ish makes me go “if this isn’t an e-mail, why the decade out of place code?”

EVEN using tables for layout there is NO reason for there to be more than ONE table for that content; to make the three columns. You seem to be nesting EVERYTHING in tables for no fathomable reason.

Oh and you know a 1024 fixed width isn’t 1024 friendly, right?

Of course, is this a NEW site? If so what’s with the tranny doctype? Transitional is for supporting old/outdated/half-assed coding techniques, NOT building new pages.

Seriously, what’s the “reason” for using tables here and not modern coding techniques? I’ve got to hear this one. I mean if you have to say “So please do not write to me about why I am not using pure CSS” it means you already know the code has it’s head up 1997’s backside… so what gives?

[PaulOB]

@deathshadow60

Oh, and as to what you are asking to do, it is indeed SOMEWHAT possible,

Then I look forward to your solution

[system]

Oh, and as to what you are asking to do, it is indeed SOMEWHAT possible, though the middle section with the links would NOT be exactly centered and the behavior would be really screwy cross-browser… but really this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="/theme/screen.css"
	media="screen,projection,tv"
/>

<title>
	RealNewsPost.com
</title>

</head><body>

<div id="pageWrapper">
	<h1>
		RealNewsPost.com<br />
		<small>
			A News site powered by the Social Network to get the TRUTH out
		</small>
	</h1>
	
	<div id="breakingNews">
		<h2>
			Breaking News:
		</h2>
		<p>
			<a href="http://RealNewsPost.com?n=think.43490">
				Gas hits $4 per Gallon, may hit $5 per Gallon soon, as usual Republicans say do NOTHING and Democrats do NOTHING
			</a>
		</p>
	<!-- #breakingNews --></div>
	
	<ul id="memberBar">
		<li><a href="login.php?PHPSESSID=8ibc3jbdf40t6ee8hl88s1su45"> Sign-In </a></li>
		<li class="last"><a href="sign-up.php?PHPSESSID=8ibc3jbdf40t6ee8hl88s1su45">Sign-Up</a></li>
	</ul>
	
	<table class="columnwrapper">
		<tr>
			<td id="mostRecentNews" rowspan="3">
	
				<h2>Most recent News articles</h2>
				
				<div class="summary">
					<h3>
						How to have Gas at $1.50 per Gallon WHILE doing great by Environment<br />
						<small><b>Author: Real_News</b>; 2011-02-28</small>
					</h3>
					<img
						src="http://www.anoox.com/news/user_images/18_43490_foto1.gif"
						width="150" height="112"
						alt="What to do to send Gas to $1.50 / Gallon"
						class="trailingPlate"
					/>
					<p>
						1- Do what China is doing, which is to operate all the Top energy companies on Nationalize basis. As a result of which Chinese Government subsidies the price of Gas so that Chinese pay MAXIMUM of $1.50 p
					</p>
					<ul>
						<li><a href="http://RealNewsPost.com?n=think.43490">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=43490">4 Comments</a></li>
					</ul>
				<!-- .summary --></div>
				
				<div class="summary">
					<h3>
						Republicans say we are broke yet instantly approve $200 Bill for unnecessary Afghan War<br />
						<small><b>Author: World</b>; 2011-02-23</small>
					</h3>
					<img
						src="http://www.anoox.com/news/user_images/32_43449_foto1.jpg"
						width="150" height="100"
						alt="Walker talking to his real Bosses"
						class="trailingPlate"
					/>
					<p>
						The cuts by Republican Governors in  Wisconsin, NJ, etc. are further example of what ENEMY of the Nation Republicans are. To be exact these lying machines, such as Walker of Wisconsin, Bohner, Cantor, Mc
					</p>
					<ul>
						<li><a href="http://RealNewsPost.com?n=think.43449">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=43449">1 Comment</a></li>
					</ul>
				<!-- .summary --></div>
				
				<div class="summary">
					<h3>
						How to cut the budget deficit by $10Trillion and create 10Mill high paying Jobs<br />
						<small><b>Author: ThinkDeep</b>; 2011-02-17</small>
					</h3>
					<img
						src="http://www.anoox.com/news/user_images/18_34356_foto2.jpg"
						width="150" height="223"
						alt="Republicans Con Job"
						class="trailingPlate"
					/>
					<p>
						Republicans, Republicrats and the <a href="http://RealNewsPost.com?n=think.33681">right-wing LYING Media</a> claim that they are worried about the Deficits! <b class="standout">THIS IS A TOTAL LIE.</b>
					</p><p>
						Because below are Steps that we can to take to cut the deficit by $10-Tril
					<p>
					<ul>
						<li><a href="http://RealNewsPost.com?n=think.34356">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=34356">18 Comments</a></li>
					</ul>
				<!-- .summary --></div>
				
				<div class="summary">
					<h3>
						US Media: Egypt revolution due to Facebook, Twitter and Google guy. REALLY!<br />
						<small><b>Author: Real_News</b>; 2011-02-16</small>
					</h3>
					<img
						src="http://www.anoox.com/news/user_images/18_43382_foto2.jpg"
						width="150" height="60"
						alt="Wall Street Journal Loves Facebook & Twitter"
					/>
					<p>
						Are you wondering why US Media, which is <a href="http://RealNewsPost.com?n=think.33681"> almost entirely right-wing</a>, engaging in this Hype, Myth & non-sense that the Egyptian revolution was orchestrated and managed by
					</p>
					<ul>
						<li><a href="http://RealNewsPost.com?n=think.43382">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=43382">1 Comment</a></li>
					</ul>
				<!-- .summary --></div>
				
				<div class="summary">
					<h3>
						Watch out for fake liberal Media, such as Huffington post<br />
						<small><b>Author: Real_News</b>; 2011-02-11</small>
					</h3>
					<img
						src="http://www.anoox.com/news/user_images/18_43331_foto1.jpg"
						width="150" height="109"
						alt="Fake Liberal Media source!"
					/>
					<p>
						You probably heard the news that Huffington post	has been purchased by AOL for $350Mill, the same AOL that was part of Time-Warner which Media out-let is/was part and parcel of the right-wing Media in US. Setting the above news aside, Huffington post is best example of how the right-wing Kabal t
					</p>
					<ul>
						<li><a href="http://RealNewsPost.com?n=think.43331">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=43331">2 Comments</a></li>
					</ul>
				<!-- .summary --></div>
				
				<div class="summary">
					<h3>
						US lecturing Egypt	- REALLY - is this a Joke!<br />
						<small><b>Author: ThinkDeep</b>; 2011-01-31</small>
					</h3>
					<img
						src="http://www.anoox.com/news/user_images/121_43241_foto2.jpg"
						width="150" height="108"
						alt="Some photo"
					/>
					<p>
						First I should state that I hope the Egyptian people can rid themselves of Mubarak and get themselves a real Democracy, and thus a country that really works for their People rather than for a very small wealthy minority at the top, which means they need to get rid of the "Shadow elite" that is behin
					</p>
					<ul>
						<li><a href="http://RealNewsPost.com?n=think.43241">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=43241">5 Comments</a></li>
					</ul>
				<!-- .summary --></div>
				
				<div class="summary">
					<h3>
						Keith Olbermann out - more proof of how right-wing US Media is<br />
						<small><b>Author: Lux_Report</b>; 2011-01-24</small>
					</h3>
					<img
						src="http://www.anoox.com/news/user_images/1684_43172_foto1.jpg"
						width="150" height="250"
						alt="Olbermann out - 1 less Hour to refute lies"
					/>
					<p>
						Black and white is easy; nuance is hard. Which is why it's much easier to just lump media outlets and personalities into simple boxes: left v. right, or partisan v. objective, for example. So if you want to play that game, it's easy to dismiss Keith Olbermann, who broadcast his final episode of C
					<p>
					<ul>
						<li><a href="http://RealNewsPost.com?n=think.43172">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=43172">0 Comments</a></li>
					</ul>
				<!-- .summary --></div>
				
				<div class="summary">
					<h3>
						Arizona Shooting is another example of what is so wrong with USA<br />
						<small><b>Author: Real_News</b>; 2011-01-17</small>
					</h3>
					<img
						src="http://www.anoox.com/news/user_images/18_43098_foto1.jpg"
						width="150" height="112"
						alt="Another Mentally ill shooter!"
					/>
					<p>
						The Arizona shootings and massacre of 6 people as tragic and sad as they are, are in fact a drop in th
					</p>
					<ul>
						<li><a href="http://RealNewsPost.com?n=think.43098">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=43098">0 Comments</a></li>
					</ul>
				<!-- .summary --></div>
				
				<div class="summary">
					<h3>
						Obma/Democrats and Republicans did not pass any real liberal causes but DADT!<br />
						<small><b>Author: power2people</b>; 2010-12-20</small>
					</h3>
					<p>
						So Obma/Democrats and the Republicans in US Senate did not pass any real liberal progressive causes, that is: 1- They did not even propose set aside pass real Universal nationalized health care, HEK they did not even pass the measly Public option toward Universal nationalized health care and keep
					</p>
					<ul>
						<li><a href="http://RealNewsPost.com?n=think.42657">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=42657">0 Comments</a></li>
					</ul>
				<!-- .summary --></div>
				
				<div class="summary">
					<h3>
						America taken Hostage - US Media says nothing against the Hostage takers<br />
						<small><b>Author: Lux_Report</b>; 2010-12-12</small>
					</h3>
					<img
						src="http://www.anoox.com/news/user_images/1684_41378_foto1.jpg"
						width="150" height="109"
						alt="Richy Rich owns All Republicans and many Dems too"
					/>
					<p>
						On Thursday Dec/9th US President (Obama), <a href="http://RealNewsPost.com?n=think.33758">for a change</a>, spoke frankly, that he agreed to the Bush area Tax cuts for the top 1%, at the cost of $1-Trillion Dollars, because the Republicans "had taken the US Government (nation) Hostage t
					<p>
					<ul>
						<li><a href="http://RealNewsPost.com?n=think.41378">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=41378">2 Comments</a></li>
					</ul>
				<!-- .summary --></div>
			<!-- #mostRecentNews --></td>
			
			<td id="mostRecommended" rowspan="3">
				<h2>Most recommended</h2>
			<!-- #mostrecommended --></td>
			
			<td id="sideBar">
			
				<div class="adverts">
					<h2>Paid Advertising</h2>
					
					<div class="ad">
						<h3>
							<a href="process_clicks.php?count=1&url=http://www.busama.com/club_details.php?id=49&flag=news_flag&art_id=0&a_id=7596">
								Scores in Tampa Florida , Exotic Dancers
							</a>
						</h3>
						<p>
							We are recruiting Exotic Dancers and Lap Dancers for the gorgeous new Scores Club in Tampa Florida
						</p>
						<a href="process_clicks.php?count=1&url=http://www.busama.com/club_details.php?id=49&flag=news_flag&art_id=0">http://www.busama.com/clu</a>
					<!-- .ad --></div>
					
					<div class=ad">
						<h3>
							<a href="process_clicks.php?count=2&url=www.enikesale.com&flag=news_flag&art_id=0&a_id=7474&PHPSESSID=8ibc3jbdf40t6ee8hl88s1su45">
								cheap sneakers wholesale,shopping online
							</a>
						</h3>
						<p>
							Cheap sneakers Basketball Shoes jordan wholesale sales,Shopping smart and shipping fast,compare prices,and get the right
						</p>
						<a href="process_clicks.php?count=2&url=www.enikesale.com&flag=news_flag&art_id=0&PHPSESSID=8ibc3jbdf40t6ee8hl88s1su45">www.enikesale.com</a>
					<!-- .ad --></div>
					
					<div class=ad">
						<h3>
							<a href="process_clicks.php?count=3&url=http://www.herbalchoicemari.com/website-herbalchoicemari/natural-henna-hair-dye-powder.html&flag=news_flag&art_id=0&a_id=7708">Safe Natural Hair Dyes</a>
						</h3>
						<p>
							100% Natural Organic Henna Color that is Chemical Free and Ammonia Free.
						</p>
						<a href="process_clicks.php?count=3&url=http://www.herbalchoicemari.com/website-herbalchoicemari/natural-henna-hair-dye-powder.html&flag=news_flag&art_id=0">http://www.herbalchoicema</a>
					<!-- .ad --></div>
					
					<div class=ad">
						<h3>
							<a href="process_clicks.php?count=4&url=http://vince4431.eliteweightlosspackage.com&flag=news_flag&art_id=0&a_id=6847">
								No pills. Simply Awsome. loss weight
							</a>
						</h3>
						<p>
							Pills do not work. Treat your body right and lose weight the right way. Easy and proven the best.
						</p>
						<a href="process_clicks.php?count=4&url=http://vince4431.eliteweightlosspackage.com&flag=news_flag&art_id=0">http://vince4431.elitewei</a>
					<!-- .ad --></div>
					
					<div class=ad">
						<h3>
							<a href="process_clicks.php?count=5&url=http://www.cookskitchenemporium.com/rostshdirobb.html &flag=news_flag&art_id=0&a_id=7419">RoncoST5000 Rotisserie Oven</a>
						</h3>
						<p>
							Cooks up to a 15 lb turkey, a 10 lb ham, four salmon steaks,two 5-lb chickens.Free Shipping
						</p>					
						<a href="process_clicks.php?count=5&url=http://www.cookskitchenemporium.com/rostshdirobb.html &flag=news_flag&art_id=0">http://www.cookskitchenem</a>
					<!-- .ad --></div>
		
				<!-- .adverts --></div>				
						
			<!-- #sideBar --></td>
			
		</tr><tr>
		
			<td id="biglinks">
			
				<a href="?PHPSESSID=8ibc3jbdf40t6ee8hl88s1su45">Place My Ads Here</a><br />
				<a href="?PHPSESSID=8ibc3jbdf40t6ee8hl88s1su45">Donate</a>
			
			<!-- #biglinks --></td>
			
		</tr><tr>
		
			<td id="freeListings">
			
				<div class="adverts">
			
					<h2>
						<a href="../free-traffic-new.php?PHPSESSID=8ibc3jbdf40t6ee8hl88s1su45">
							Free Ad Listings
						</a>
					</h2>
					
					<div class="ad">
						<h3>
							<a href="http://www.anoox.com/inc/process_free_clicks.php?tx_id=71287&url=http://www.realtypropertymanager.com&url_id=6294">
								Property Management
							</a>
						</h3>
						<p>
							Realty Property Manager property centric :-)
						</p>
					<!-- .ad --></div>
					
					<div class=ad">
						<h3>
							<a href="http://www.anoox.com/inc/process_free_clicks.php?tx_id=71869&url=http://www.igork10.webs.com&url_id=6110">
								Internet Caffe
							</a>
						</h3>
						<p>
							Best collection wallpapers, technology news
						</p>
					<!-- .ad --></div>
					
					<div class=ad">
						<h3>
							<a href="http://www.anoox.com/inc/process_free_clicks.php?tx_id=71815&url=http://www.everything4pageants.com&url_id=6233">
								Everything for Pagea
							</a>
						</h3>
						<p>
							Gowns, Jewelry, Interview Suits, Shoes, etc.
						</p>
					<!-- .ad --></div>
					
				<!-- .adverts --></div>					
				
			<!-- #freeListings --></td>

		</tr>
		
	</table>
	
	<div id="footer">
		<ul>
			<li>About Us</li>
			<li>Advertise</li>
			<li>Support</li>
			<li class="last">Legal Notices</li>
		</ul>
	<!-- #footer --></div>

<!-- #pageWrapper --></div>

</body></html>

Is what I’d suggest using if you are going to do table for layout to do that since you have the one rare condition where ONE table for layout is justified.

It’s just a matter of not wrapping EVERYTHING in tables for no good reason. I’ll take a stab at CSS to go with that when/if I get my crippy backside out of bed.

[system]

Gah, that markup I posted is trash and I’m past the edit limit. What I get for trying to code on the laptop with these crappy useless keyboards.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="/theme/screen.css"
	media="screen,projection,tv"
/>

<title>
	RealNewsPost.com
</title>

</head><body>

<!--
	HR are for non "screen CSS" appearance, removed in CSS
-->

<div id="pageWrapper">
	<h1>
		RealNewsPost.com<br />
		<small>
			A News site powered by the Social Network to get the TRUTH out
		</small>
	</h1>

	<div id="breakingNews">
		<h2>Breaking News:</h2>
		<p>
			<a href="/?n=think.43490">
				Gas hits $4 per Gallon, may hit $5 per Gallon soon, as usual Republicans say do NOTHING and Democrats do NOTHING
			</a>
		</p>
	<!-- #breakingNews --></div>

	<hr />

	<ul id="memberBar">
		<li><a href="login.php?PHPSESSID=8ibc3jbdf40t6ee8hl88s1su45"> Sign-In </a></li>
		<li class="last"><a href="sign-up.php?PHPSESSID=8ibc3jbdf40t6ee8hl88s1su45">Sign-Up</a></li>
	</ul>

	<hr />

	<!--
		non-breaking spaces in h2 below are to maintain column
		minimum widths when CSS disabled. Good for usability
	-->

	<table class="columnwrapper" cellpadding="6">
		<tr>
			<td id="mostRecentNews" rowspan="3" valign="top">

				<h2>Most&nbsp;recent&nbsp;News&nbsp;articles</h2>

				<hr />

				<div class="summary">
					<h3>
						<a href="/?n=think.43490">How to have Gas at $1.50 per Gallon WHILE doing great by Environment</a><br />
						<small><b>Author: Real_News</b>; 2011-02-28</small>
					</h3>
					<img
						src="http://www.anoox.com/news/user_images/18_43490_foto1.gif"
						width="150" height="112"
						alt="What to do to send Gas to $1.50 / Gallon"
						class="trailingPlate"
					/>
					<p>
						1- Do what China is doing, which is to operate all the Top energy companies on Nationalize basis. As a result of which Chinese Government subsidies the price of Gas so that Chinese pay MAXIMUM of $1.50 p
					</p>
					<ul>
						<li><a href="/?n=think.43490">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=43490">4 Comments</a></li>
					</ul>
				<!-- .summary --></div>

				<hr />

				<div class="summary">
					<h3>
						<a href="/?n=think.43449">Republicans say we are broke yet instantly approve $200 Bill for unnecessary Afghan War</a><br />
						<small><b>Author: World</b>; 2011-02-23</small>
					</h3>
					<img
						src="http://www.anoox.com/news/user_images/32_43449_foto1.jpg"
						width="150" height="100"
						alt="Walker talking to his real Bosses"
						class="trailingPlate"
					/>
					<p>
						The cuts by Republican Governors in  Wisconsin, NJ, etc. are further example of what ENEMY of the Nation Republicans are. To be exact these lying machines, such as Walker of Wisconsin, Bohner, Cantor, Mc
					</p>
					<ul>
						<li><a href="/?n=think.43449">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=43449">1 Comment</a></li>
					</ul>
				<!-- .summary --></div>

				<hr />

				<div class="summary">
					<h3>
						<a href="/?n=think.34356">How to cut the budget deficit by $10Trillion and create 10Mill high paying Jobs</a><br />
						<small><b>Author: ThinkDeep</b>; 2011-02-17</small>
					</h3>
					<img
						src="http://www.anoox.com/news/user_images/18_34356_foto2.jpg"
						width="150" height="223"
						alt="Republicans Con Job"
						class="trailingPlate"
					/>
					<p>
						Republicans, Republicrats and the <a href="/?n=think.33681">right-wing LYING Media</a> claim that they are worried about the Deficits! <b class="standout">THIS IS A TOTAL LIE.</b>
					</p><p>
						Because below are Steps that we can to take to cut the deficit by $10-Tril
					</p>
					<ul>
						<li><a href="/?n=think.34356">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=34356">18 Comments</a></li>
					</ul>
				<!-- .summary --></div>

				<hr />

				<div class="summary">
					<h3>
						<a href="/?n=think.43382">US Media: Egypt revolution due to Facebook, Twitter and Google guy. REALLY!</a><br />
						<small><b>Author: Real_News</b>; 2011-02-16</small>
					</h3>
					<img
						src="http://www.anoox.com/news/user_images/18_43382_foto2.jpg"
						width="150" height="60"
						alt="Wall Street Journal Loves Facebook &amp; Twitter"
					/>
					<p>
						Are you wondering why US Media, which is <a href="/?n=think.33681"> almost entirely right-wing</a>, engaging in this Hype, Myth &amp; non-sense that the Egyptian revolution was orchestrated and managed by
					</p>
					<ul>
						<li><a href="/?n=think.43382">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=43382">1 Comment</a></li>
					</ul>
				<!-- .summary --></div>

				<hr />

				<div class="summary">
					<h3>
						<a href="/?n=think.43331">Watch out for fake liberal Media, such as Huffington post</a><br />
						<small><b>Author: Real_News</b>; 2011-02-11</small>
					</h3>
					<img
						src="http://www.anoox.com/news/user_images/18_43331_foto1.jpg"
						width="150" height="109"
						alt="Fake Liberal Media source!"
					/>
					<p>
						You probably heard the news that Huffington post	has been purchased by AOL for $350Mill, the same AOL that was part of Time-Warner which Media out-let is/was part and parcel of the right-wing Media in US. Setting the above news aside, Huffington post is best example of how the right-wing Kabal t
					</p>
					<ul>
						<li><a href="/?n=think.43331">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=43331">2 Comments</a></li>
					</ul>
				<!-- .summary --></div>

				<hr />

				<div class="summary">
					<h3>
						<a href="/?n=think.43241">US lecturing Egypt	- REALLY - is this a Joke!</a><br />
						<small><b>Author: ThinkDeep</b>; 2011-01-31</small>
					</h3>
					<img
						src="http://www.anoox.com/news/user_images/121_43241_foto2.jpg"
						width="150" height="108"
						alt="Some photo"
					/>
					<p>
						First I should state that I hope the Egyptian people can rid themselves of Mubarak and get themselves a real Democracy, and thus a country that really works for their People rather than for a very small wealthy minority at the top, which means they need to get rid of the "Shadow elite" that is behin
					</p>
					<ul>
						<li><a href="/?n=think.43241">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=43241">5 Comments</a></li>
					</ul>
				<!-- .summary --></div>

				<hr />

				<div class="summary">
					<h3>
						<a href="/?n=think.43172">Keith Olbermann out - more proof of how right-wing US Media is</a><br />
						<small><b>Author: Lux_Report</b>; 2011-01-24</small>
					</h3>
					<img
						src="http://www.anoox.com/news/user_images/1684_43172_foto1.jpg"
						width="150" height="250"
						alt="Olbermann out - 1 less Hour to refute lies"
					/>
					<p>
						Black and white is easy; nuance is hard. Which is why it's much easier to just lump media outlets and personalities into simple boxes: left v. right, or partisan v. objective, for example. So if you want to play that game, it's easy to dismiss Keith Olbermann, who broadcast his final episode of C
					</p>
					<ul>
						<li><a href="/?n=think.43172">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=43172">0 Comments</a></li>
					</ul>
				<!-- .summary --></div>

				<hr />

				<div class="summary">
					<h3>
						<a href="/?n=think.43098">Arizona Shooting is another example of what is so wrong with USA</a><br />
						<small><b>Author: Real_News</b>; 2011-01-17</small>
					</h3>
					<img
						src="http://www.anoox.com/news/user_images/18_43098_foto1.jpg"
						width="150" height="112"
						alt="Another Mentally ill shooter!"
					/>
					<p>
						The Arizona shootings and massacre of 6 people as tragic and sad as they are, are in fact a drop in th
					</p>
					<ul>
						<li><a href="/?n=think.43098">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=43098">0 Comments</a></li>
					</ul>
				<!-- .summary --></div>

				<hr />

				<div class="summary">
					<h3>
						<a href="/?n=think.42657">Obma/Democrats and Republicans did not pass any real liberal causes but DADT!</a><br />
						<small><b>Author: power2people</b>; 2010-12-20</small>
					</h3>
					<p>
						So Obma/Democrats and the Republicans in US Senate did not pass any real liberal progressive causes, that is: 1- They did not even propose set aside pass real Universal nationalized health care, HEK they did not even pass the measly Public option toward Universal nationalized health care and keep
					</p>
					<ul>
						<li><a href="/?n=think.42657">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=42657">0 Comments</a></li>
					</ul>
				<!-- .summary --></div>

				<hr />

				<div class="summary">
					<h3>
						<a href="/?n=think.41378">America taken Hostage - US Media says nothing against the Hostage takers</a><br />
						<small><b>Author: Lux_Report</b>; 2010-12-12</small>
					</h3>
					<img
						src="http://www.anoox.com/news/user_images/1684_41378_foto1.jpg"
						width="150" height="109"
						alt="Richy Rich owns All Republicans and many Dems too"
					/>
					<p>
						On Thursday Dec/9th US President (Obama), <a href="/?n=think.33758">for a change</a>, spoke frankly, that he agreed to the Bush area Tax cuts for the top 1%, at the cost of $1-Trillion Dollars, because the Republicans "had taken the US Government (nation) Hostage t
					</p>
					<ul>
						<li><a href="/?n=think.41378">read article</a></li>
						<li class="last"><a href="http://www.anoox.com/news/show_replies.php?article=41378">2 Comments</a></li>
					</ul>
				<!-- .summary --></div>

			<!-- #mostRecentNews --></td>

			<td id="mostRecommended" rowspan="3" valign="top">
				<h2>Most&nbsp;recommended</h2>
				<hr />
			<!-- #mostrecommended --></td>

			<td id="sideBar" valign="top">

				<div class="adverts">
					<h2>Paid&nbsp;Advertising</h2>

					<hr />

					<div class="ad">
						<h3>
							<a href="process_clicks.php?count=1&amp;url=http://www.busama.com/club_details.php?id=49&amp;flag=news_flag&amp;art_id=0&amp;a_id=7596">
								Scores in Tampa Florida , Exotic Dancers
							</a>
						</h3>
						<p>
							We are recruiting Exotic Dancers and Lap Dancers for the gorgeous new Scores Club in Tampa Florida
						</p>
						<a href="process_clicks.php?count=1&amp;url=http://www.busama.com/club_details.php?id=49&amp;flag=news_flag&amp;art_id=0">http://www.busama.com/clu</a>
					<!-- .ad --></div>

					<hr />

					<div class="ad">
						<h3>
							<a href="process_clicks.php?count=2&amp;url=www.enikesale.com&amp;flag=news_flag&amp;art_id=0&amp;a_id=7474&amp;PHPSESSID=8ibc3jbdf40t6ee8hl88s1su45">
								cheap sneakers wholesale,shopping online
							</a>
						</h3>
						<p>
							Cheap sneakers Basketball Shoes jordan wholesale sales,Shopping smart and shipping fast,compare prices,and get the right
						</p>
						<a href="process_clicks.php?count=2&amp;url=www.enikesale.com&amp;flag=news_flag&amp;art_id=0&amp;PHPSESSID=8ibc3jbdf40t6ee8hl88s1su45">www.enikesale.com</a>
					<!-- .ad --></div>

					<hr />

					<div class="ad">
						<h3>
							<a href="process_clicks.php?count=3&amp;url=http://www.herbalchoicemari.com/website-herbalchoicemari/natural-henna-hair-dye-powder.html&amp;flag=news_flag&amp;art_id=0&amp;a_id=7708">Safe Natural Hair Dyes</a>
						</h3>
						<p>
							100% Natural Organic Henna Color that is Chemical Free and Ammonia Free.
						</p>
						<a href="process_clicks.php?count=3&amp;url=http://www.herbalchoicemari.com/website-herbalchoicemari/natural-henna-hair-dye-powder.html&amp;flag=news_flag&amp;art_id=0">http://www.herbalchoicema</a>
					<!-- .ad --></div>

					<hr />

					<div class="ad">
						<h3>
							<a href="process_clicks.php?count=4&amp;url=http://vince4431.eliteweightlosspackage.com&amp;flag=news_flag&amp;art_id=0&amp;a_id=6847">
								No pills. Simply Awsome. loss weight
							</a>
						</h3>
						<p>
							Pills do not work. Treat your body right and lose weight the right way. Easy and proven the best.
						</p>
						<a href="process_clicks.php?count=4&amp;url=http://vince4431.eliteweightlosspackage.com&amp;flag=news_flag&amp;art_id=0">http://vince4431.elitewei</a>
					<!-- .ad --></div>

					<hr />

					<div class="ad">
						<h3>
							<a href="process_clicks.php?count=5&amp;url=http://www.cookskitchenemporium.com/rostshdirobb.html &amp;flag=news_flag&amp;art_id=0&amp;a_id=7419">RoncoST5000 Rotisserie Oven</a>
						</h3>
						<p>
							Cooks up to a 15 lb turkey, a 10 lb ham, four salmon steaks,two 5-lb chickens.Free Shipping
						</p>
						<a href="process_clicks.php?count=5&amp;url=http://www.cookskitchenemporium.com/rostshdirobb.html &amp;flag=news_flag&amp;art_id=0">http://www.cookskitchenem</a>
					<!-- .ad --></div>

					<hr />

				<!-- .adverts --></div>

			<!-- #sideBar --></td>

		</tr><tr>

			<td id="biglinks" valign="middle">
				<div>
					<a href="?PHPSESSID=8ibc3jbdf40t6ee8hl88s1su45">Place My Ads Here</a><br />
					<a href="?PHPSESSID=8ibc3jbdf40t6ee8hl88s1su45">Donate</a>
				</div>

			<!-- #biglinks --></td>

		</tr><tr>

			<td id="freeListings" valign="bottom">

				<hr />

				<div class="adverts">

					<h2>
						<a href="../free-traffic-new.php?PHPSESSID=8ibc3jbdf40t6ee8hl88s1su45">
							Free&nbsp;Ad&nbsp;Listings
						</a>
					</h2>

					<div class="ad">
						<h3>
							<a href="http://www.anoox.com/inc/process_free_clicks.php?tx_id=71287&amp;url=http://www.realtypropertymanager.com&amp;url_id=6294">
								Property Management
							</a>
						</h3>
						<p>
							Realty Property Manager property centric :-)
						</p>
					<!-- .ad --></div>

					<div class="ad">
						<h3>
							<a href="http://www.anoox.com/inc/process_free_clicks.php?tx_id=71869&amp;url=http://www.igork10.webs.com&amp;url_id=6110">
								Internet Caffe
							</a>
						</h3>
						<p>
							Best collection wallpapers, technology news
						</p>
					<!-- .ad --></div>

					<div class="ad">
						<h3>
							<a href="http://www.anoox.com/inc/process_free_clicks.php?tx_id=71815&amp;url=http://www.everything4pageants.com&amp;url_id=6233">
								Everything for Pagea
							</a>
						</h3>
						<p>
							Gowns, Jewelry, Interview Suits, Shoes, etc.
						</p>
					<!-- .ad --></div>

				<!-- .adverts --></div>

			<!-- #freeListings --></td>

		</tr>

	</table>

	<div id="footer">
		<hr />

		<ul>
			<li>About Us</li>
			<li>Advertise</li>
			<li>Support</li>
			<li class="last">Legal Notices</li>
		</ul>
	<!-- #footer --></div>

<!-- #pageWrapper --></div>

</body></html>

Better markup (as in like… valid), looks proper without the CSS, now to see if I can remember how to force the middle div to expand when it’s default behavior is to always, always, ALWAYS shrink.

[WorldNews]

deathshadow60, Well I see that you are a real CSS enthusiast and are all worked up about this, so I dont want to add much fuel to your fire

But I tell you this much: ONE of the reasons we want to have the lowest level foundation of the site to be Table based is that not all browsers render CSS the same exact way all the time, a problem that does not really exist at all with Tables since they actually go back to HTML-1.0

So we think then the best design combination is to have the lowest level foundation of the site to be Table based and then use CSS & Php to dynamically manage the site.

Now about your comments that:

“Oh and you know a 1024 fixed width isn’t 1024 friendly, right?”

What do you suggest as being a better width? My research has shown this to be the best of all choices.

[QUOTE=deathshadow60;4822334]Given the example link I am only left asking “REALLY NEEDED FOR WHAT?!?” Wasting bandwidth and development time for no reason? Flushing accessiblity and semantics down the toilet?

I mean, the only legitimate excuse I could find for that is if you’re building an e-mail, which you obviously are not. I’m actually interested in hearing what your excuse is for it being “really needed for this purpose” as there’s no reason even in tabular layouts to be using tables when you only have ONE TD per TR!!! That’s HTML 101. Basics of using tables – if it’s only one column you shouldn’t be using a table! EVEN when using tables for layout this:

		<tr bgcolor="#ffffff">
			<td height="5">
			</td>
		</tr>

[system]

@WorldNews

But I tell you this much: ONE of the reasons we want to have the lowest level foundation of the site to be Table based is that not all browsers render CSS the same exact way all the time, a problem that does not really exist at all with Tables since they actually go back to HTML-1.0

Uhm, hate to break it to you, but they didn’t exist until HTML 3.0… and they are just as (and often more) broken cross browser as anything else. Hence the white ‘bars’ offsetting the bottom borders in opera and webkit that aren’t showing up in FF/IE on your current page. (display:block could clear that up)

They also make the markup needlessly complex and take extra time to render.

As to supporting ‘the lowest level foundation’ I assume you mean old browsers – and unless you’re still catering to netscape 4 users, there’s no legitimate reason for it. A properly coded CSS layout will work just fine all the way back to IE 5.5, and if care is taken most of it will work in IE 5.0 – again, if you’re worried about older than that, you’re stuck in 1997… and even Win 95 can run IE 5.5, FF 1.0 or Opera 8.5

In an age where many developers are telling IE6 users to hit the bricks. (which I attribute to shortsightedness and laziness)

@WorldNews

So we think then the best design combination is to have the lowest level foundation of the site to be Table based and then use CSS & Php to dynamically manage the site.

There’s a difference between table based layouts and tables for NOTHING though – and you’ve got a nasty case of tables for nothing AND non-semantic markup - which COMPLETELY defeat what you are trying to accomplish! The latter making browsers like lynx and screen readers be effectively useless… much less the rikki fit mobile devices throw on it.

I don’t know who told you tables were better for reaching more users – or that wrapping EVERY SINGLE ELEMENT in a table for no reason was good practice, but they packed you so full of sand you could change your name to Sahara.

ESPECIALLY if you aren’t practicing semantic markup. Users of really old browsers or really limited browsers will likely turn CSS off and have their browsers ignore presentational elements like the LONG DEPRECATED font tag and bgcolor attribute.

You’re basically practicing 1997 style “for screen only” presentational markup – the type of markup where people were still using style embeds instead of link and went “media attribute, what’s that? WCAG? Never heard of it.”

Even worse, the lack of heading tags, lists for menus, paragraphs around the ACTUAL paragraphs (instead of being filled with a IMG and a DIV filled with redundant content?!?) are pretty much flushing your chances of search engines doing anything meaningful with the site… much less screen readers and other accessibility devices having NO way to discern what’s what in your content.

@WorldNews

What do you suggest as being a better width? My research has shown this to be the best of all choices.

Users screens MAY be 1024 wide, but what’s that on the side of the screen when maximized? A Scrollbar! Scrollbar and window borders (some OS always show them even when maximized, Some OS like the Mac don’t even give you a real maximize) means you have to take about 48px or so off to be on the safe side… On a 1024 wide display maximized your page is going to have a horizontal scrollbar and 40+px chopped off the right side until you scroll.

…which is why a 1024 friendly design should be 976px or narrower, and why a 800 friendly design should be 752px or less…

Though IMHO targeting fixed width in the first place is a steaming pile of /FAIL/… fluid or semi-fluid for the win, and if you’re using tables for layout that’s EASY.