So something weird is happening for me here… i have had borders on my divs for testing so i could see where they begin and end. Once i removed the border one of my divs contents disappears and i do not understand why…
here is my main html file
<!DOCTYPE html>
<html>
<head>
<title>EasyZag Admin</title>
<!-- add the jQuery script -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!-- add the jQWidgets framework -->
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
<!-- add the css themes -->
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<link href="stylesheets/basic.css" media="all" rel="stylesheet" type="text/css" />
<link href="jqwidgets/styles/jqx.darkblue.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id='container'>
<div id="header">
<div id='logo'>
<img src="ezag_logo.jpeg" alt="eZag">
</div>
<script type="text/javascript">
$(document).ready(function () {
// Create a jqxMenu and set its width and height.
$("#jqxmenu").jqxMenu({ height: 30 , theme: 'darkblue'});
$("#main").height($('#container').height() - $('#header').height() - $('#footer').height() - 10);
});
$(window).resize(function() {
$("#main").height($('#container').height() - $('#header ').height() - $('#footer').height() - 10);
});
</script>
<div id='jqxmenu'>
<ul>
<li><a href="#">Home</a></li>
<li>Clients
<ul>
<li><a href="#">Add Client</a></li>
<li><a href="#">All Clients</a></li>
<li><a href="#">Search</a></li>
</ul>
</li>
<li><a href="#">Logout</a></li>
</ul>
</div>
</div><br />
<div id="main">
<?php
if(isset($_GET['section'])) {
//include which section
} else {
include "default.php";
echo "hello";
}
?>
</div>
<div id="footer">
<center>Copyright 2012, EasyZag</center>
</div>
</div>
</body>
</html>
And here is my CSS file
body, html { height: 99%; width: 99%;}
div {position: relative; border: 1px dotted;}
#container {width: 100%; height: 100%; background-color:#E8F4FF; border-radius:25px; border: solid; border-color: }
#header { float: left; height: 80px; width: 100%; }
#logo {float: left; width: 225px; height: 70px; padding-left: 10px; padding-top: 10px;}
#jqxmenu {float: left; position: relative; top: 40px; left: 0px; }
#main {position: width: 100%; height: 50%; overflow: auto;}
#footer {float: left; width: 100%; position: absolute; bottom: 0;}
And finally all the php include is follows:
Welcome to EasyZag Admin!<br />
<br />
Goals:<br />
<br />
Does anyone know why just changing
div {position: relative; border: 1px dotted;}
To
div {position: relative;}
in my css file would completely remove the div that has the php include in it?
Thanks
Theres an error in #main – you haven’t included a value for the position property..