I try to make the content div of my page expand according to the content that is loaded in it due to a script. I've tried everything I know and everything I have found on the internet, but nothing has the result I want.
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function(){
$('#nav a').click(function(e) {
$('#content').hide().load( $(this).attr('href') , function(){
$('#content').show()
})
return false
})
})
</script>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="nav"><a href="home.html">Home</a>
<a href="the_band.html">The Band</a>  
<a href="News.html">News</a>  
<a href="gallery.html">Gallery</a> Merchandise
<a href="contact.html">Contact</a></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
div#container {
height: 100%;
width: 100%;
}
div#header {
top: 0px;
width: 100%;
height: 80px;
position: fixed;
background-color: transparent;
text-align: center;
}
div#nav {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
top: 120px;
width: 100%;
height: 40px;
position: fixed;
text-decoration: none;
text-align: center;
font-weight: bolder;
font-variant: normal;
}
div#content {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 12px;
position: absolute;
top: 200px;
bottom: 40px;
left: 200px;
right: 200px;
}
div#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
bottom: 0px;
position: fixed;
height: 30px;
width: 100%;
text-align: center;
color: #fff;
}
.ttdesign {
font:"Arial Black", Gadget, sans-serif; color: #09F;
}
a:link {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
}
a:visited {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
}
a:hover {
font-family: MgSouvenirLight;
font-size: 18pt;
font-style: italic;
color: #FC0;
}
The demo link is: http://thodoris.esy.es/is/
Right now, the problem that occurs, is that the content that is loaded, does not make the #content expand, but it seems to load over it... Any ideas?
If you want your page to be responsive you may be better of using bootstrap as using there grid system will allow you to make all aspects of your page responsive depending on the content and screen size.
You can get it here
And here are some free templates to show you how it all fits together here