Hello,
Heres the link to the page In question.... http://team2648.com/OTIS2/DivTest.html
So If you look at that page, If your browser is small enough, you see that below the box with the red background, there is a bit of space, Why doesn't the box below float up?
The HTML Code:
<!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>OTIS v1.5</title>
<!-- Javascript - Fix the flash of unstyled content -->
<script type="text/javascript"></script>
<!-- Stylesheets -->
<link href="css/reset.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/styling.css" rel="stylesheet" type="text/css" media="screen" />
<!--Validation-->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/common.js" type="text/javascript"></script>
<!-- Meta Information -->
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Techplex Engineer" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-10899272-10']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="container">
<div id="header">
<div id="header-in">
<h2>Online Team Information System</h2>
<h6>A Web Database Application for Team Profile Management</h6>
</div> <!-- end #header-in -->
</div> <!-- end #header -->
<div id="content-wrap" class="clear lcol"> <!-- Navigation Column-->
<div class="column">
<div class="column-in">
<ul>
<li> My </li>
<ul>
<li><a href="./"> Dashboard </a></li>
<li><a href="?page=manage.profile"> Profile</a></li>
<li><a href="?page=manage.info"> Information</a></li>
<li><a href="?page=manage.econtact"> Emergency Contact</a></li>
</ul>
<li> Management </li>
<ul>
<li><a href="?page=manage.users"> Users </a></li>
<li><a href="?page=email"> Email </a></li><li><a href="?page=blog"> Blog </a></li>
</ul>
<li><a href="?page=bugs.php&referrer=/OTIS2/"> Report a Bug </a></li>
<li><a href="logout.php"> Logout </a></li>
</ul>
<br />
Logged in as:
<br />
<a href="?page=manage.profile">Blake </a>
</div>
</div>
<div class="content">
<div class="content-in">
<h5>Welcome to your personal dashboard Blake </h5><hr id="hr1"/>
<div id="bio" style="display: none;">
Your current Bio: <br/><textarea rows="10" cols="50"> </textarea>
</div>
<div id="profilestats" class="widget">
<strong>IMPORTANT</strong><br/>
<ul style="padding-left: 10px;">
<li>Your Public Profile is pending moderation.</li>
</ul>
</div>
<div id="cal" class="widget">
<!-- <iframe src="https://www.google.com/calendar/hosted/team2648.com/embed?showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;mode=AGENDA&amp;height=200&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=team2648.com_a1ur39fpp2cn076ak2q06o8hhc%40group.calendar.google.com&amp;color=%235229A3&amp;ctz=America%2FNew_York" style=" border-width:0 " width="400" height="200" frameborder="0" scrolling="no"></iframe>-->
<iframe src="https://www.google.com/calendar/hosted/team2648.com/embed?showNav=0&amp;showDate=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;mode=AGENDA&amp;height=200&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=team2648.com_a1ur39fpp2cn076ak2q06o8hhc%40group.calendar.google.com&amp;color=%235229A3&amp;ctz=America%2FNew_York" style=" border-width:0 " width="400" height="200" frameborder="0" scrolling="no"></iframe>
</div>
<div id="stats" class="widget"><!-- and finally output the information formated for the widget-->
<strong>You have:</strong><br/>
<ul style="padding-left: 10px;">
<li> <strong>42</strong> of 30 fundraising hours<br/></li>
<li>fundraised $<strong>160</strong> of $300<br/></li>
<li> <strong>3</strong> of 5 community service hours<br/></li>
<li> <strong>0</strong> of 40 build hours <br/></li>
</ul>
</div>
<div id="logins" class="widget">
<form name="controlsForm">
<input id="cblogin" type="checkbox" name="loginbox" onClick=""/> Disable Login<br />
<input id="cbreg" type="checkbox" name="regbox" onClick=""/> Disable Registration<br />
</form>
</div>
<div class="clear"></div>
</div><!-- end .content-in -->
</div> <!-- end .content -->
</div> <!-- end #content-wrap -->
<div id="footer">
<div id="footer-in">
This system was designed, built and is maintained by Blake for Infinite Loop Robotics <br>OTIS(Online Team Information System) © 2010 Techplex Labs </div> <!-- end #footer-in -->
</div> <!-- end #footer -->
</div> <!-- end div#container -->
</body>
</html>
You can view the css here: http://team2648.com/OTIS2/css/styling.css
but the relevant part is this:
div.widget{
width: 200px;
float: left;
/* text-align: center;*/
border: 1px solid black;
padding: 8px;
margin: 8px;
/* margin-left:8px;
font-weight:400;*/
-moz-border-radius:11px;
-khtml-border-radius:11px;
-webkit-border-radius:11px;
border-radius:5px;
background:#fff;
border:2px solid #e5e5e5;
-moz-box-shadow:rgba(200,200,200,1) 0 4px 18px;
-webkit-box-shadow:rgba(200,200,200,1) 0 4px 18px;
-khtml-box-shadow:rgba(200,200,200,1) 0 4px 18px;
box-shadow:rgba(200,200,200,1) 0 4px 18px;
/* padding:16px 16px 40px;*/
}
div#disclaimer
{
margin-top: 10px;
border: 1px dotted black;
font-size:10px;
background-color: #D7D7D7;
}
div.clear
{
clear: both;
}
div#profilestats
{
border:2px solid #FF9999;
}
div#cal
{
width: 400px;
padding-bottom: 0px;
}