Top & Bottom Halves Layout

Submitted by:Andery Smith

Date added:27 August, 2012

Category:HTML

HTML code for Top & Bottom Halves Layout

Tags: halves layout

Code Snippet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Top and Bottom Halves</title>

<style type="text/css">

* { margin: 0; padding: 0; }
p { padding: 20px; }
#top { background: #eee; }
#bottom { background: #ddd; }

</style>

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script><script type="text/javascript">
$(function(){

var $window = $(window);
winHeight = $window.height();

$("#top").height(winHeight/2);
$("#bottom").height(winHeight/2);

$(window).resize(function(){

winHeight = $window.height();

$("#top").height(winHeight/2);
$("#bottom").height(winHeight/2);

});
});
</script>
</head>

<body>

<div id="top">
<p>Top Half</p>
<p>Text here</p>
</div>

<div id="bottom">
<p>Bottom Half</p>
<p>Text Here</p>
</div>

</body>
</html>
 
 

Comments