Div Layout Trouble

nlh205 · June 20, 2011, 1:41am

I’ve encountered a little trouble with my layout. I have 2 tables that are going to be in a column and an ad column is going to float to the right of it and im having a little trouble. I’ll provide my codes and the link below. Thanks for any help.

www.gamejunkie.ca

index.php:

<?php

include 'functions.php';

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Game Junkie</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="page">
  <!-- Start:Page Banner -->
  <div id="top">
    <div class="back">&nbsp;</div>
    <div class="content">
      <p>Game Junkie</p>
    </div>
  </div>
  <!-- End:Page Banner -->
  <!-- Start:Bottom -->
  <div id="bottom">
    <div class="trans">&nbsp;</div>
    <div id="menu">
      <ul id="nav">
        <li><a href="category.php?value=action">Action</a></li>
        <li><a href="category.php?value=adventure">Adventure</a></li>
        <li><a href="category.php?value=arcade">Arcade</a></li>
        <li><a href="category.php?value=puzzle">Puzzle</a></li>
        <li><a href="category.php?value=simulation">Simulation</a></li>
        <li><a href="category.php?value=sports">Sports</a></li>
        <li><a href="category.php?value=strategy">Strategy</a></li>
        <li class="last"><a id="more_btn" onclick="$('#more_con').slideToggle(2000);">More</a></li>
      </ul>
    </div>
    <div id="more_con">More</div>
    <div class="content">
        <div id="section" style="width:582px;">
          <div id="header">New Games</div>
          <?php $query = mysql_query("SELECT * FROM games ORDER BY date DESC") or die(mysql_error());

			$i = 0;

			while($games = mysql_fetch_array($query)){

				$loc = explode(".", $games['swf']);

				if($i < 9){?>
          <div id="icon" onmouseover="this.style.backgroundColor='#333'" onmouseout="this.style.backgroundColor='#222'" onclick="document.location.href='play.php?game=<?php echo $games['id']; ?>'">
            <table border="0px" cellpadding="0px" cellspacing="0px" style="width:100%;">
              <tr>
                <th colspan="2"><?php echo $games['name']; ?></th>
              </tr>
              <tr>
                <td style="width:75px;"><img style="height:75px;border:1px solid black;" src="file_database/<?php echo $loc[0]; ?>.jpg" /></td>
                <td style="width:100%;font-size:9px;font-family:Verdana, Geneva, sans-serif;text-align:left;vertical-align:text-top;"><?php echo truncateString($games['description'], 100); ?>&nbsp;</td>
              </tr>
            </table>
          </div>
          <?php $i++;

				}

			}?>
        </div>
        <!-- Start:Ad -->
      <div class="ad_1">
        <table cellpadding="0" border="0" cellspacing="0" style="background-color:#900;height:600px;width:160px;">
          <tr>
            <td>ad</td>
          </tr>
        </table>
      </div>
      <!-- End:Ad -->
        <div id="section" style="width:582px; position:relative;">
          <div id="header">Top Games</div>
          <?php $query = mysql_query("SELECT * FROM games ORDER BY total_plays DESC") or die(mysql_error());

			$i = 0;

			while($games = mysql_fetch_array($query)){

				$loc = explode(".", $games['swf']);

				if($i < 9){?>
          <div id="icon" onmouseover="this.style.backgroundColor='#333'" onmouseout="this.style.backgroundColor='#222'" onclick="document.location.href='play.php?game=<?php echo $games['id']; ?>'">
            <table border="0px" cellpadding="0px" cellspacing="0px" style="width:100%;">
              <tr>
                <th colspan="2"><?php echo $games['name']; ?></th>
              </tr>
              <tr>
                <td style="width:75px;"><img style="height:75px;border:1px solid black;" src="file_database/<?php echo $loc[0]; ?>.jpg" /></td>
                <td style="width:100%;font-size:9px;font-family:Verdana, Geneva, sans-serif;text-align:left;vertical-align:text-top;"><?php echo truncateString($games['description'], 100); ?>&nbsp;</td>
              </tr>
            </table>
          </div>
          <?php $i++;

				}

			}?>
        </div>
      </div>
      
    </div>
  <!-- End:Bottom -->
</div>
</body>
</html>

style.css:

/* Start:Cross-Page Styles */
html {
	border:0px;
	margin:0px;
	outline:0px;
	padding:0px;
	cursor:default;
}
body {
	background-image:url(images/back.jpg);
	background-color:#111;
	background-repeat:repeat;
	background-position:right top;
	color:#fff;
	font:12px Arial Black, Gadget, sans-serif;
}
a {
	color:#000;
}
#page {
	position:relative;
	text-align:center;
	width:800px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	margin-bottom:10px;
	border:0px;
	outline:0px;
	padding:0px;
}
/* Start: Banner */
#top {
	width:800px;
	height:75px;
	position:relative;
	float:left;
	overflow:hidden;
	margin:0px 0px 16px 0px;
}
#top .back {
	opacity:0.6;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	background-color:#000;
	width:800px;
	height:75px;
	position:absolute;
	top:0px;
	left:0px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
}
#top .content {
	position:relative;
}
#top .content p {
	color:#069;
	font-size:24px;
	text-shadow: 0px -1px 0px #111;
}
/* End: Banner */
/* Start: Menu */
#menu {
	text-align:center;
	width:100%;
	height:auto;
	overflow:hidden;
	position:relative;
	display:block;
}
#nav {
	width:100%;
	height:34px;
	float:left;
	display:block;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	padding:0px;
	list-style:none;
	background-color:#069;
	color:#000;
	font:13px Arial Black, Gadget, sans-serif;
}
#nav li {
	float:left;
	display:block;
}
#nav li a {
	display:block;
	padding:8px 22px;
	text-decoration:none;
	font-weight:bold;
}
#nav li a:hover {
	background-color:#0076AE;
}
#nav li.last {
	float:none;
	overflow:hidden;
}
#more_con {
	width:776px;
	height:150px;
	margin:0px 12px 12px 12px;
	position:relative;
	background-color:#0076AE;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	display:none;
}
/* End: Menu */
/* Start: Bottom */
#bottom {
	width:800px;
	height:100%;
	position:relative;
	float:left;
	overflow:hidden;
}
#bottom .trans {
	opacity:0.6;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	background-color:#000;
	width:800px;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
}
#bottom .content {
	position:relative;
	padding:0px 12px 12px 12px;
}
/* End: Bottom */
#section {
	text-align:center;
	background:#111;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:8px 0px 0px 8px;
	overflow:auto;
	margin-right:12px;
	margin-bottom:12px;
}
#icon {
	text-align:center;
	background:#222;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	float:left;
	margin-right:8px;
	margin-bottom:8px;
	padding:3px;
	width:180px;
	cursor:pointer;
}
#header {
	text-align:left;
	padding:0px 25px 0px 3px;
	background:#069;
	border-bottom-right-radius:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	border-top-right-radius:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px;
	clear:right;
	margin-bottom:8px;
	position:relative;
	left:-8px;
	color:#000;
	font:18px Arial Black, Gadget, sans-serif;
	height:26px;
	width:auto;
}
#game {
	text-align:center;
	background:#111;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	padding:8px;
	overflow:hidden;
	clear:right;
	margin:auto;
	margin-bottom:12px;
}
#info {
	text-align:center;
	background:#111;
	width:728px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:8px 0px 8px 8px;
	margin-left:17px;
	margin-bottom:12px;
	clear:right;
}
/* End:Cross-Page Styles */
/* Start: Ads */
.ad_1 {
	text-align:center;
	vertical-align:top;
	background:#111;
	width:160px;
	height:600px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:7px;
	position:relative;
	margin:0px 0px 0px 0px;
	clear:right;
}
.ad_2 {
	text-align:center;
	background:#111;
	width:728px;
	height:90px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:7px;
	margin-left:17px;
	margin-bottom:12px;
	clear:right;
}
.ad_3 {
	text-align:center;
	background:#222;
	width:300px;
	height:250px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:5px;
	clear:right;
}
/* End: Ads */

ralphm · June 20, 2011, 2:52am

What trouble are you having? It looks OK in Firefox.

nlh205 · June 20, 2011, 3:02am

Yeah i’ve just fixed it the problem. But thank you for your help.

system · October 8, 2014, 1:12am