Jump to content

Recommended Posts

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>|";

 

}

 

Link to comment
https://forums.phpfreaks.com/topic/226022-displaytable-breaking-layout/
Share on other sites

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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.