How can I create liquid header (100%) and fix content (950px) and footer using yui?
Something like this:
----------------------------------
| header (liquid) |
----------------------------------
| left | right |
-------------------
| footer |
-------------------
Any input will be much appreciated.
Here, I've attached a very basic structure for you.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Stackoverflow</title>
<style type="text/css">
body{
margin:0;
}
#container{
width:100%;
}
#header{
width:100%;
background:olive;
}
#content{
width:950px;
margin:0 auto;
overflow:hidden;
}
#left{
width:500px;
float:left;
background:blueviolet;
}
#right{
width:430px;
float:right;
background:green;
}
#footer{
width:100%;
overflow:hidden;
background:red;
}
</style>
</head>
<body>
<div id="container">
<div id="header">I'm the header with a width of 100%</div>
<div id="content">
<div id="left">
<h1>I'm the left floated content</h1>
<p>lorem ipsum</p>
</div>
<div id="right">
<h2>I'm the right floated content</h2>
<p>lorem ipsum</p>
</div>
<div id="footer">
<h3>I'm the footer</h3>
</div>
</div>
</div>
</body>
</html>
I hope this helps!
The best way to do this, using CSS Grids, would be to create a div outside the #doc2 div which you would use as your header div. Just delete the div#hd from inside the #doc2 div, and you won't have that header at all.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Base Page</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
</head>
<body>
<div id="doc3" class="yui-t7"><div id="hd" role="banner">Header</div></div>
<div id="doc2" class="yui-t7">
<div id="bd" role="main">
<div class="yui-g">
<!-- YOUR DATA GOES HERE -->
</div>
</div>
<div id="ft" role="contentinfo"><p>Footer</p></div>
</div>
</body>
</html>