css - 在页面底部向左浮动 div

Question

一段时间以来，我一直在努力解决这个问题，但我只是被难住了。基本上我有一个左侧导航栏，然后我想要主要内容就在它的右边，但无论我尝试什么，主要内容都在页面底部。

这是页面的代码部分。

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

Answer 1

您的宽度加起来超过屏幕的 100%。您正在使用 95% + 未指定的 .leftnav 和 .maincontent 边距 + .leftnav 上的默认填充。指定0px padding 和margins 没有问题。