Jump to content

Divs In Divs, Simulating Table


smerny
 Share

Recommended Posts

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

Edited by smerny
Link to comment
Share on other sites

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...)

Link to comment
Share on other sites

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

Edited by smerny
Link to comment
Share on other sites

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]

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Edited by Sckewi
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...