Labrat Posted January 29, 2011 Share Posted January 29, 2011 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§ion=addcat\">Add Category</a> | <a id=\"subcategories\" href=\"index.php?content=maintenance§ion=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§ion=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§ion=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§ion=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§ion=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§ion=categories&p=$i\">$i</a>|"; } Quote Link to comment https://forums.phpfreaks.com/topic/226022-displaytable-breaking-layout/ Share on other sites More sharing options...
haku Posted January 29, 2011 Share Posted January 29, 2011 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. Quote Link to comment https://forums.phpfreaks.com/topic/226022-displaytable-breaking-layout/#findComment-1166853 Share on other sites More sharing options...
Labrat Posted January 29, 2011 Author Share Posted January 29, 2011 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. Quote Link to comment https://forums.phpfreaks.com/topic/226022-displaytable-breaking-layout/#findComment-1166960 Share on other sites More sharing options...
©ode® Posted January 29, 2011 Share Posted January 29, 2011 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. Quote Link to comment https://forums.phpfreaks.com/topic/226022-displaytable-breaking-layout/#findComment-1167089 Share on other sites More sharing options...
Labrat Posted January 29, 2011 Author Share Posted January 29, 2011 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 Quote Link to comment https://forums.phpfreaks.com/topic/226022-displaytable-breaking-layout/#findComment-1167100 Share on other sites More sharing options...
cssfreakie Posted January 30, 2011 Share Posted January 30, 2011 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 Quote Link to comment https://forums.phpfreaks.com/topic/226022-displaytable-breaking-layout/#findComment-1167178 Share on other sites More sharing options...
Labrat Posted January 30, 2011 Author Share Posted January 30, 2011 ty for the offer but i have already rewritten everything. Quote Link to comment https://forums.phpfreaks.com/topic/226022-displaytable-breaking-layout/#findComment-1167186 Share on other sites More sharing options...
haku Posted January 30, 2011 Share Posted January 30, 2011 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. Quote Link to comment https://forums.phpfreaks.com/topic/226022-displaytable-breaking-layout/#findComment-1167260 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.