Divs In Divs, Simulating Table

[smerny]

Container div:

.fh2{width: 886px;background: #000099;color: #ccccff;margin: 0;padding: 2px;border: 0 solid #3333ff;border-left-width: 5px;border-right-width: 5px;border-bottom-width: 1px;}

This will contain a forum board and information on itNow what I want within that div are other divs... 1) I want them to stack side by side against each other to the right... 2) the far right one will have a right text align... 3) all but the far left one will have a solid #3333ff left border and a fixed width... 4) the far left one will be left text align and the width will just fill in whats leftbasically the same thing as the way the boards are listed on the index of this forum... except without the "mark as read" column and with the far right column having a right text align... and using divs instead of tables... i'm not even going to show what i was trying because it is completely whack

[thescientist]

jhslip(?) always posts that link to his site that shows how to make multiple divs in a row...find some of his recent posts i bet one of them was that. (unless I completely misread what you where asking for...)

[smerny]

worked on it a little more and this is what i come up with so far... http://www.submitandrate.com/forum/not working the way i want, i was expecting [info] to be in a separate area left of the area it is showing in...CSS:

body {background: #000;color: #999;}#container{width:900px;margin: 0 auto;}.left {float:left;}.right {float:right;}/*###### FORUM STYLING ###########################################*/#forumhead{width:886px;background:#000099;margin:0;padding:2px;color: #ccccff;font: bold 12px arial;border: 0 solid #3333ff;border-left-width: 5px;border-right-width: 5px;border-top-width: 5px;}.fh1{width: 890px;background: #3333ff;color: #ccc;border: 0;margin:0;padding: 5px;font:bold 18px arial;}.fh2{width: 886px;background: #000099;color: #ccccff;margin: 0;padding: 2px;border: 0 solid #3333ff;border-left-width: 5px;border-right-width: 5px;border-bottom-width: 1px;}	.fh2 a:link {color:#ffff00}	.fh2 a:visited {color:#ffff00}	.fh2 a:hover {color:#ffff00}	.fh2 a:active {color:#ffff00}.fh2_1{text-align:left;boarder:0;float:left;}.fh2_2{border: 0;float:right;display:block;}.fh2_2inner{border: 0 solid #3333ff;border-left-width: 1px;}#forumfoot{}/*###### END FORUM STYLING ######################################*/

PHP:

	echo "	<div id='forumhead'>	  <div class='left'>		Board	  </div>	  <div class='right'>		Last Post	  </div>	  <div style='clear:both;font-size:0;height:0;line-height:0;'></div>	</div>";	$search = "SELECT * FROM categories ORDER BY priority";	$result = mysql_query($search) or die ("SQL Error: forum/index.php: categories: " . mysql_error());	while($row = mysql_fetch_array($result))	{		echo "		<div class='fh1'>		  ".$row['name']."		</div>";		$search2 = "SELECT * FROM boards WHERE ID_CAT='".$row['ID']."' ORDER BY priority";		$result2 = mysql_query($search2) or die ("SQL Error: forum/index.php: boards: " . mysql_error());		while($row2 = mysql_fetch_array($result2))		{			echo "			<div class='fh2'>			  <div class='fh2_2'>				<div class='fh2_2inner'>				  <a href='../members.php?action=getinfo&userid=".$row2['ID_lastposter']."'>".$row2['name_lastposter']."</a><br />".				  $row2['time_lastpost']."				</div>				<div class='fh2_2inner'>				  [info]				</div>			  </div>			  <div class='fh2_1'>				<a href='index.php?page_mode=boardview&board_id=".$row2['ID']."'>".$row2['name']."</a><br />".				$row2['description']."			  </div>			  <div style='clear:both;font-size:0;height:0;line-height:0;'></div> 			</div>";		}//end board while	}//end category while

[jlhaslip]

Add float:right to the fh2_2inner div'sAnd find a way to control the width of the text data in the Description. It is messing with the layout.

[smerny]

actually that float:right made it do what i wanted... except one thing, how can I make the fh2_2inner div the same height as fh2?display:block is what i thought might do it, but it didn't... i suppose i could put a break in each of the divs but thats not really what i'd want to do either.. also i'd like to vertically center the [info]

[smerny]

should i just use tables?

[jlhaslip]

Many Forums use tables for this layout due to the issues you are experiencing.Before committing to Tables, check out "Phorum" software. A sample can be found here. It is Validated as Transitional, but still uses Tables for the presentation of the Categories, etc. Because the information is coming from a Database, I would see it as Table-based output.

[sckewi]

I think using tables for a forum layout is acceptable since it is in a way tabular data, for example:

Forum Name | Num Posts | Last postGeneral    | 200       | 10/10/2000Spam forum | 10        | 12/10/2001

Perfect candidate for a table.For the header, footer and basic page navigation (like up the top there you have links to W3Schools.com, Guidelines and Netiquette, Members etc), stick with divs.