Menu
Hi,
I’m trying to create a two column CSS layout framework.
The two columns must be vertically and horizontal centred dependant on screen resolution, with column 2 horizontally fluid. Also, column 2 must be scrollable.
Any help or ideas welcome.
Thank you,
Barton.
<i>
</i>#overallDiv{
margin: 0 auto;
width: 700px;
height: 500px;
}
<i>
</i><div id="overallDiv">
<div id="menuDiv"></div>
<div id="contentDiv"></div>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"This should look the same for all/most browsers (although I didn't check it yet).
"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=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */
html, body {min-height:100%; /*for compliant browsers*/ height:100%;
font:x-small Arial, Verdana, sans-serif; voice-family: ""}"";voice-family:inherit;font-size:small;/*for IE 5.5 */
font-size:100%; line-height:1.125em;}
body {background-color:#e1ddd9; font-size:12px; font-family:Arial, verdana, helvetica, georgia, times new roman, times, sans-serif;
color:#564b47; padding-bottom:25px; /* IE does not understand "margin-bottom" on BODY, so padding-bottom instead*/}
ul li {float:left; /* cure IE5.x "whitespace in lists" problem */width: 100%;}
ul li a {height:1%; /* make links honour display:block properly */}
#wrapper {position:relative; width:85%; margin:30px auto 3px auto; background-color:#fff; height:400px; margin-bottom:-3px;}
#wrapper p {margin:10px; color:black; background-color:transparent}
* html #content {height:100%;}/* and feed older IE what it needs */
#header {width:100%; height:75px; border-bottom:3px double gray;}
#navs {position:absolute; left:0; top:80px; margin:10px; width:160px; padding:20px 0; height:273px; background-color:wheat;}
#navs li {margin:15px 0 5px 10px; list-style-type:none;}
#navs li a {}
#navs li a:hover{color:red; padding-left:5px;}
#text {margin-left:180px; border-left:3px double gray; height:270px; background-color:silver; padding:25px 20px 30px 25px; overflow-y:scroll; }
#footer {width:85%; height:20px; padding:20px 0; margin:0 auto; background-color:tan; border-top:17px solid white; text-align:center;}
html, body, p, th, td, li, dd, dt {font:0.875em Arial, Helvetica, verdana sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family:Arial, Helvetica, 'times new roman', serif; margin:10px}
h1 {font-size:2.0em;}
h2 {font-size:1.5em;}
h3 {font-size:1.2em;}
h4 {font-size:1.0em;}
h5 {font-size:0.9em;}
h6 {font-size:0.8em;}/* Defined default Header sizes*/
a:link, a:visited, a:focus, a:hover, a:active {background-color:none;}/*s.508 Accessibility*/
a:link {color:#00f;}
a:visited {color:#009;}
a:focus, a:hover {color:#06f;}/* a:focus for non-mouse pointers: e.g. "hotkeys", etc. s.508*/
a:active {color:#0cf;}
<!--[if lte IE 6]-->
body {font-size:17px;}/*for IE*/
<!--<[endif]-->
</style>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js " type="text/javascript"></script>
<![endif]-->
<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href="favicon.ico" /><!-- path to your favicon -->
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Header stuff</h1>
</div>
<ul id="navs">
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
</ul>
<div id="text">
<h1>Text Goes Here</h1>
<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and
I will give you a complete account of the system, and expound the actual teachings of the great explorer of
the truth, the master-builder of human happiness.</p>
<p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how
to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who
loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances
occur in which toil and pain can procure him some great pleasure.</p>
<p>To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some
advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that
has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p>
<p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized
by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that
are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is
the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish.</p>
<p>In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best,
every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty
or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.
The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure
other greater pleasures, or else he endures pains to avoid worse pains.
</p>
<h1>Text Goes Here</h1>
<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and
I will give you a complete account of the system, and expound the actual teachings of the great explorer of
the truth, the master-builder of human happiness.</p>
<p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how
to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who
loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances
occur in which toil and pain can procure him some great pleasure.</p>
<p>To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some
advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that
has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p>
<p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized
by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that
are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is
the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish.</p>
<p>In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best,
every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty
or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.
The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure
other greater pleasures, or else he endures pains to avoid worse pains.
</p>
</div>
</div><!-- end "#wrapper" -->
<div id="footer">
<p>Footer information goes here. Copyright, year, Contact information, etc.</p>
</div>
</body></html>[/QUOTE]
0.1.9 — BETA 4.27