display:table breaking layout

[Labrat]

I have been searching everywhere and can't seem to find a solution to my problem.

 

I have a fluid layout (2 column with equal amounts), inside of the main column i have a table using <div>`s, the problem is when I use   

#container div

{

margin-bottom: -2000px;

padding-bottom: 2000px;

}

to make both sides equal, the table breaks the layout and spans the length plus some! heres the css for the page:

 

html, body{

margin:0px;

padding:0px;

text-align:center;

}

 

#pagewidth{

width:800px;

text-align:left; 

margin-left:auto;

margin-right:auto; 

border: 1px solid #000000;

}

 

#header{

position:relative;

margin-left:auto;

margin-right:auto;

}

 

#container {

overflow: hidden;

}

      #container div {

  margin-bottom: -2000px;

padding-bottom: 2000px;

}

 

#leftcol{

width:20%;

float:left;

display:inline;

position: relative;

background: #90EE90;

}

 

#maincol{

background-color: #FFFFFF;

float: left;

width:80%;

display:inline;

position: relative;

}

.table {

  display: table;

width: 95%;

background-color:#C0C0C0;

border: 1px solid #000000;

margin-left:auto;

margin-right:auto; 

}

 

.row {

  display: table-row;

height:20px;

border: 0px solid #000000;

}

 

.cell {

  display: table-cell;

height:20px;

    font-family: Tahoma;

    font-size: 12px;

    font-style: normal;

    font-weight:normal;

border: 1px solid #000000;

}

 

.table_head {

  display: table-cell;

height:20px;

border: 1px solid #000000;

    font-family: Tahoma;

    font-size: 12px;

    font-style: normal;

    font-weight:bold;

}

 

and the html for the page:

 

{

$max = 20; //amount of articles per page. change to what to want

 

$p = $_GET['p'];

 

if(empty($p))

 

{

 

$p = 1;

 

}

 

$limits = ($p - 1) * $max;

 

$sql = mysql_query("SELECT * FROM ad_category WHERE parent_id='0' LIMIT ".$limits.",$max") or die(mysql_error());

 

//the total rows in the table

 

$totalres = mysql_result(mysql_query("SELECT COUNT(cat_id) AS tot FROM ad_category WHERE parent_id='0'"),0);

 

echo "<h3>Category Management</h3>

<a id=\"addcat\" href=\"index.php?content=maintenance&section=addcat\">Add Category</a> | <a id=\"subcategories\" href=\"index.php?content=maintenance&section=subcategories\">Sub-Categories List</a><br>";

 

echo "<br><center>Number of listings Found:<font color=\"red\"><b> ".$totalres. "</b></font></center><br>";

 

//the total number of pages (calculated result), math stuff...

 

$totalpages = ceil($totalres / $max);

 

    echo "

<div class=\"table\">

<div class=\"row\">

<div class=\"table_head\"> </div>

<div class=\"table_head\">Category Name: </div>

<div class=\"table_head\">Category Status: </div>

<div class=\"table_head\">Edit Category: </div>

<div class=\"table_head\">Delete Category:</div>

<div class=\"table_head\">Set Status: </div>

</div>";

 

while($r = mysql_fetch_array($sql))

 

{

 

$cat_id = $r['cat_id'];

 

$cat_name = $r['cat_name'];

 

$cat_status = $r['cat_status'];

 

    echo "<div class=\"row\">

<div class=\"cell\"><img src=\"images/category.png\" border=\"0\" height=\"16\" width=\"16\"></div>

 

<div class=\"cell\"> ". $r['cat_name']. "</div>

 

<div class=\"cell\">";

if (($cat_status) == 1){

echo "<font color=\"#008000\">Active</font>";

}

else

{

echo "<font color=\"#FF0000\">Inactive</font>";

}

echo "</div>

 

<div class=\"cell\"><a id=\"editcat\" href=\"index.php?content=maintenance&section=editcat&cat_id=$cat_id\"><img src=\"images/edit.png\" border=\"0\" height=\"16\" width=\"16\"></a></div>

 

<div class=\"cell\"><a onclick=\"return deleteCat()\" id=\"deletecat\" href=\"index.php?content=maintenance&section=deletecat&cat_id=$cat_id\"><img src=\"images/delete.png\" border=\"0\" height=\"16\" width=\"16\"></a></div>";

 

 

if ($cat_status == 1){

    echo "<div class=\"cell\"><a onclick=\"return catstatOff()\" id=\"catstatOff\" href=\"index.php?content=maintenance&section=catstatOff&cat_id=$cat_id\"><img src=\"images/unban_user.png\" border=\"0\" height=\"16\" width=\"16\"></a></div></div>";

}

else

if ($cat_status == 0){

    echo "<div class=\"cell\"><a onclick=\"return catstatOn()\" id=\"catstatOn\" href=\"index.php?content=maintenance&section=catstatOn&cat_id=$cat_id\"><img src=\"images/ban_user.png\" border=\"0\" height=\"16\" width=\"16\"></a></div></div>";

}

}

    echo "</div>";

 

}

 

for($i = 1; $i <= $totalpages; $i++){

 

//this is the pagination link

 

echo "<a id=\"categories\" href=\"index.php?content=maintenance&section=categories&p=$i\">$i</a>|";

 

}

 

[haku]

1) Please don't post PHP in this section. The PHP is irrelevant. Only the HTML output has any relevancy, as CSS acts on HTML, not PHP.

2) Youi are going to drive yourself crazy using display:table, as it doesn't work on IE.

[Labrat]

sorry for the PHP, I was just thinking that the more you knew about my code the easier it might be to help me.

 

So you are saying to get rid of the table and try to line things up with padding and such? i wanted the "table" look.

[©ode®]

No you can still achieve the result you want but through the div tags themselves. I believe he is saying display:table is not supported by IE.

[Labrat]

so any suggestions on how I can get it to work with this layout? I dont want to have to use the normal html table tags and know no other way of doing a table. just the display:table or making div`s inside of div's using padding between each section

[cssfreakie]

so any suggestions on how I can get it to work with this layout? I dont want to have to use the normal html table tags and know no other way of doing a table. just the display:table or making div`s inside of div's using padding between each section

could you draw how you want it to look (as basic containers etc), and maybe post your code in code tags next time, the above is really unreadable. Ill make it for you if i am able today

[Labrat]

ty for the offer but i have already  rewritten everything.

 

[haku]

If your data actually is tabular (i.e. cross-references two categories to provide data), then using table tags is entirely fine. If you are just trying to lay something out on the other hand, then you should use CSS and other methods.