[RESOLVED] div covering footer

[Desbrina]

The page: http://new.midnighttempest.com/

As you can see, the content div is covering the footer, it sits just below the menu, whereas i want it to sit just below the content

the php file:

<?php
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
include($phpbb_root_path . 'includes/functions_display.' . $phpEx);
include($phpbb_root_path . 'includes/bbcode.' . $phpEx);

// Start session management
$user->session_begin();
$auth->acl($user->data);
$user->setup();

page_header('Homepage');

$template->set_filenames(
	array(
    	'body' => 'main.html',
	)
);

$forumid = 14;

$sql_array = array(
	'SELECT' => '*',
	'FROM' => array(TOPICS_TABLE => 't'),
	'LEFT_JOIN' => array(
		array(
			'FROM' => array(POSTS_TABLE => 'p'),
			'ON' => 't.topic_first_post_id = p.post_id'
		)
	),
	'WHERE' => 't.forum_id = ' . $forumid . '
		AND MONTH(FROM_UNIXTIME(post_time)) = MONTH(CURDATE())',
	'GROUP_BY' => 't.topic_id',
	'ORDER_BY' => 'post_time DESC'
);
$sql = $db->sql_build_query('SELECT', $sql_array);
$result = $db->sql_query($sql);
while($row = $db->sql_fetchrow($result))
{		
	$url = "<a href='".$phpbb_root_path."viewtopic.php?f=".$forumid."&t=".$row['topic_id']."'>".$row['post_subject']."</a>";
	$poster = "<a href='".$phpbb_root_path."memberlist.php?mode=viewprofile&u=".$row['topic_poster']."'>".$row['topic_first_poster_name']."</a>";
	$date = $user->format_date($row['post_time'], false, false) . "</strong>";
	$text = generate_text_for_display(smiley_text($row['post_text']), $row['bbcode_uid'], $row['bbcode_bitfield'], $row['enable_bbcode'] = $row['enable_smilies'] = $row['enable_magic_url'] = true);
	$avatar = '<img src="http://new.midnighttempest.com/download/file.php?avatar=2_1260394092.png" />';;

$updates[] = 
	'<table width="100%" border="0">
	  <tr>
		<td colspan="2"><strong>Title</strong>:'.$url.'</td>
	  </tr>
	  <tr>
		<td width="10%">'.$avatar.'</td>
		<td width="90%">'.$text.'</td>
	  </tr>
	  <tr>
		<td colspan="2"><strong>Posted On:</strong> '.$date.' <strong>by</strong> '.$poster.'</td>
	  </tr>
	  <tr>
		<td colspan="2"><hr/></td>
	  </tr>
	</table>';


}
$db->sql_freeresult($result);

$template->assign_vars(
	array(
		'UPDATES' => implode('', $updates),
		'FORUMID' => $forumid
	)
);

page_footer();

?>

main.html

<!-- INCLUDE overall_header.html -->

<div class="forabg" id="main">
    <div class="inner">
        <span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <span style="font-size: small">Updates</span>
                </dl>
            </li>
        </ul>
        <ul class="topiclist forums">
            <li class="row" style="background: #CBA2DC; padding-left: 5px; padding-bottom:5px; padding-right:5px; padding-top:5px;">
                <p>&nbsp;</p>
                {UPDATES}
                <p><a href="/viewforum.php?f={FORUMID}">View all previous updates</a> </p>
            </li>
        </ul>
        <span class="corners-bottom"><span></span></span>
    </div>		
</div>

<div class="forabg" id="menu">
	<div class="inner">
        <span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <span style="font-size: small">Menu</span>
                </dl>
            </li>
        </ul>
        <ul class="topiclist forums">
            <li class="row" style="background: #CBA2DC; padding-left: 5px; padding-bottom:5px; padding-right:5px; padding-top:5px;">
                <!-- INCLUDE mt_menu.html -->
            </li>
        </ul>
        <span class="corners-bottom"><span></span></span>
    </div>
</div>

<!-- INCLUDE overall_footer.html -->

mt_menu

<p><strong>Info</strong>
  <br />
  <a href="/">Home</a><br />
  About / Rules
    <br />
Join Form </p>
<p><strong>Members</strong>
  <br />
  Memberlist
  <br />
  Card List
  <br />
  Games
  <br />
  Forum
  <br />
  Donate
  <br />
  Login </p>
<p><strong>Other</strong>
  <br />
  Affiliates
  <br />
  Link to us
  <br />
  Randomizer
  <br />
  Staff Pay
  <br />
  Credits
  <br />
  Contact Us</p>

css

/* Midnight Tempest Layout */

#main {
	position:absolute;
	width:70%;
	overflow:visible;
	z-index:1;
}
#menu {
	float:right;
	width:20%;
	overflow:visible;
	z-index:2;
}

[johanafm]

I can only guess what it looks like in whatever browser you're using. To me, I have content to the left, then below it and to the right comes the menu, and below that comes the footer

*******************
* CONTENT         *
*******************
                      *********
                      * MENU  *
                      *********
*******************************
* FOOTER                      *
*******************************

My guess is you've placed the menu after the content in the markup.

Other than that, start by fixing the validation errors and see if that helps.

[Desbrina]

well, the validation errors are fixed, but the layout still doesn't work properly

[johanafm]

But now I get the same display as you describe in your first post.

You have

<div id="page-body">
	<div id="menu">
	<div id="main">

and

#menu { float: right; }
#main { position: absolute; }
.forabg { clear: both; }

Absolutely positioned elements do not change size of their parents, and neither do floated elements.

Remove position: absolute or explicitly set it back to the default value static. Then remove clear: both from forabg.

As long as the menu is shorter than the content, it will look fine. You'd probably have to do some more work otherwise.

[Desbrina]

thanks, that seems to have got it, will removing the clear: both cause any problems with the actual forum layout? What does it actually do?

[johanafm]

Clear specifies what sides of an element were floating elements are NOT allowed.

<div style="float: right;"></div>
<div style="clear: right;"></div>

Normally the second div would be placed to the right of the first one (assuming there's enough width in the containing element), but the second div disallows floating elements on its right side, and so it is placed below the first div.

Removing clear: both from a style rule may very well break something else on your page that actually requires it. You'd have to try and see what happens. If something goes wrong, you'd either have to specify a class style having clear and assign it to the elements that need them, or leave everything as is, but specify a class style without it for these divs in question.

One common use for the clear is adjusting height of a containing element according to the highest column

<div style="width: 600px; border: 2pt solid black; padding: 10px;">
	<div style="width: 150px; height: 200px; border: 1pt solid black; margin: 2px; float: right;">1</div>
	<div style="width: 150px; height: 300px; border: 1pt solid black; margin: 2px; float: right;">2</div>
	<div style="width: 150px; height: 100px; border: 1pt solid red; margin: 2px; float: right">3</div>
	<div style="clear: right; width: 0px; height: 0px;"></div>
</div>

Removing the last element, or its clear style attribute will minimize the height of the outermost div, since floating elements do not affect it. However, with the last element present with clear: right means it will be placed below the others, and since it's neither floating nor absolutely positioned, the containing div will adjust its height accordingly.