1

I've been banging my head on this on for a while now and I'm just stumped. Basically I have a left nav bar and then I want the main content just to the right of this, but no matter what I try the main content is at the bottom of the page.

Here is the section of code for the page.

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

Now here is the CSS code for these specific divs listed above.

.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;
}

Hopefully someone can help me figure out where I have gone wrong with this. Just as a little additional information, I'm using Dreamweaver CS5 for this site. Thanks in advance for any feedback.

Here is the HTML/CSS code from the leftnav.php include file.

 <?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>  
4
  • The padding on your .mainContent div might be a problem. (It will effectively make the width wider than 70%). Nov 19, 2012 at 23:01
  • 1
    Rendered HTML output please. This is a HTML/CSS question, not a PHP one! Nov 19, 2012 at 23:02
  • 1
    Create a fiddle with your HTML/CSS defective! :) Nov 19, 2012 at 23:19
  • 3
    I just created a fiddle with your code and it seems fine.. link May be the inclusion of the php code in the <div class="leftnav">is altering the view.
    – Usha
    Nov 20, 2012 at 0:07

1 Answer 1

0

Your width adds up to more than 100% of the screen. You are utilizing 95% + unspecified .leftnav and .maincontent margins + the default padding on .leftnav. Specify 0px padding and margins and there is no problem.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.