I wanted to get a liquid layout with 2 rows taking up 50% of the browser hight each. I saw this type of layout on a site recently. It was a very minimalistic design. So I started to replicate it and do my own version. I then started to run into difficulties. I did some surfing and couldn't come up with the answer. So then I made a cup of tea, really put my brain into action, solved it, and now I'm sharing it with you.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two equal rows</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
background:#FFFFFF;
}
#top
{
height:auto;
clear:both;
}
#bottom
{
color:#FFFFFF;
position:fixed;
right:0;
bottom:0;
width:100%;
_position: absolute;
background:#FF0000;
height:50%;
}
</style>
</head>
<body>
<section id="top">
Hello
</section>
<section id="bottom">
Hello
</section>
</body>
</html>
No comments:
Post a Comment