Hi guys one problem I have been having lately is when I create a template for a website my container div does not surround all of the elements inside it. The only way I can get it to do so is to give it a height but I dont want this. I want it to adjust according depending if the browser is adjusted. By giving it a specific height I cannot do this. It will work for divs inside the container which contain text. Below is my code if anyone could help me.
<html>
<head>
<script type="text/javascript">
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myWidth = window.innerWidth; myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myWidth = document.body.clientWidth; myHeight = document.body.clientHeight;
}
</script>
<link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<script type="text/javascript">
document.write('<p>' + myWidth + 'x' + myHeight + '</p>');
</script>
<div id="cont">
<div id="head">
Head
</div><!--end of head div-->
<div id="content">
<div class="cnt">
Content 1
<p>
Random text Random text Random text Random text Random text Random text Random text
Random text Random text Random text Random text Random text Random text Random text
Random text Random text Random text Random text Random text Random text Random text
Random text Random text Random text Random text Random text Random text Random text
</p>
</div><!--end of cnt1 class-->
<div class="cnt">
Content 2
</div><!--end of cnt2 class-->
<div class="cnt">
Content 3
</div><!--end of cnt3 class-->
</div><!--end of content div-->
<div id="sidebar">
Sidebar
</div><!--end of sidebar div-->
</div><!--end of cont div-->
</body>
</html>
<!--Css file-->
*{
margin:0;
padding:0;
text-align:center;
}
#cont{
width:80%;
height:400px;;
margin-left:auto;
margin-right:auto;
border:1px solid #000;
margin-top:10px;
min-width:500px;
}
#head{
width:100%;
border:1px solid #000;
}
#content{
width:100%;
border:1px solid #000;
margin-left:auto;
margin-right:auto;
}
.cnt{
width:30%;
border:1px solid red;
float:left;
margin:10px 0px 10px 2%;
display:inline-block;
}
#sidebar{
width:100%;
border:1px solid #000;
float:left;
}