css - 左上 float div停留在页面底部

我已经为此花了好一会儿，但我很困惑。基本上，我有一个左侧的导航栏，然后我希望主要内容位于其右侧，但是无论我尝试什么，主要内容都在页面底部。

这是该页面的代码部分。

<div class="leftnav">
<?php require_once('includes/leftnav.php'); ?>
 </div>
<div class="mainContent">
<?php if (isset($_SESSION['MM_UserGroup'])) { ?>
  Welcome back <?php echo $_SESSION['MM_UserGroup']; ?>.
<p>Here are just a few of your latest stats.</p>
<table width="500" border="1">
 <tr>
  <td scope="col">Most recent show total:</td>
  <th scope="col"><?php echo "$".$row_MostRecent['total_retail']; ?></th>
</tr>
<tr>
  <td>Current month shows total:</td>
  <td><?php echo "$".$row_CurrentMonth['CurrentMonth']; ?></td>
</tr>
<tr>
  <td>Last month shows total:</td>
  <td><?php echo "$".$row_LastMonth['LastMonth']; ?></td>
</tr>
<tr>
  <td>Year to date shows total:</td>
  <td><?php echo "$".$row_YeartoDate['YeartoDate']; ?></td>
</tr>
</table>
<p>&nbsp;</p>
<p>
<?php } else { ?>
Alternative text if user is not logged in.
<?php } ?>
</p>
<div class="clearfloat"></div>
</div>

现在，这是上面列出的这些特定div的CSS代码。

.leftnav {
height: auto;
width: 25%;
border: 1px #000 solid;
float:left;
}
.mainContent {
float: left;
width: 70%;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}

.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

希望有人可以帮助我找出我在哪里出错了。只是一些其他信息，我正在此站点上使用Dreamweaver CS5。预先感谢您的任何反馈。

这是leftnav.php包含文件中的HTML / CSS代码。

 <?php if (!isset($_SESSION['MM_Username'])) { ?>
 <div id="login">
 Please login below:
 <form ACTION="<?php echo $loginFormAction; ?>" method="POST">
<p>
  <label for="username">Username:</label>
  <input name="username" type="text" id="username" />
</p>
<p>
  <label for="password">Password:</label>
  <input name="password" type="password" id="password" />
</p>
<p>
  <input type="submit" name="submit" id="submit" value="Submit" />
 </p>
 </form>
 <?php } else { ?>
 <?php echo "Welcome " . $_SESSION['MM_UserGroup']  . "!"; ?>
 <br />
 <a href="<?php echo $logoutAction ?>">Log out</a>
 <?php } ?>
 <p>Upcoming shows: </p>
<?php if (isset($_SESSION['MM_UserGroup'])) { ?>
<table class="upcoming" border="1">
  <tr>
    <th width="50%" scope="col">Hostess</th>
    <th width="50%" scope="col">Date/Time</th>
  </tr>
  <?php do { ?>
  <tr>
      <td><?php echo $row_UpcomingShows['hostess_fname'] . " " . $row_UpcomingShows['hostess_lname']; ?> </td>
      <td><?php $date = date_create($row_UpcomingShows['actual_datetime']); echo date_format($date, 'D M j Y'); ?></td>
  </tr>
  <?php } while ($row_UpcomingShows = mysql_fetch_assoc($UpcomingShows)); ?>
</table>
<?php } ?>
<p><br />
  Newest daughters:
  <br />
  </p>
</div>

最佳答案

您的宽度总计超过屏幕的100％。您正在利用95％+未指定的.leftnav和.maincontent边距+ .leftnav上的默认填充。指定0px填充和边距，没有问题。