googlebot
04-25-2009, 11:53 AM
Hi, I have this code for a 2 column css site. I have noticed that in IE the left div with the "menu" seems to be at the bottom of the section not at the top. Is there a way to move the div to the top of the section?
Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Fluid 2-Column CSS Layout</title>
<!-- styles suitable for any browser, any media -->
<style type="text/css" title="Site default">
body {
background-color: #fff5e1;
color: #000;
}
a:link {
color: #00c;
background-color: transparent;
}
a:visited {
color: #909;
background-color: transparent;
}
a:hover {
color: #513600;
background-color: transparent;
}
</style>
<!-- hide these rules from legacy browsers and mobile devices -->
<style type="text/css" title="Site default" media="all">
@media screen, projection {
/* exploit a parsing bug so @media rules are visible to MacIE5 */
.BeNiceToMacIE5 {
font-family: "\"}\"";
font-family: inherit;
}
body {
background-color: #fffaf0;
color: #000;
}
.wrapper {
padding: 0;
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
}
h1 {
background-color: #ffdf9d; /* different color than content */
color: #7d5500;
margin: 0;
padding: .2em 2%;
}
h2 {
margin: .2em 0;
}
.main {
clear: both;
width: 900px;
margin: 0;
padding: 0;
color: #000;
background: #fff5e1 url(images/2col-bg3.png) 25% 0 repeat-y;
/* background-color value is for content background.
Image is 2000px wide, ~25% is colored, where sidebar should be
(exact pixel count of colored area is actually closer to 26%).
Position corresponds to left sidebar, repeat img vertically.
Easily modified for right sidebar - just flip the image,
change bg position to 75% and change .content to float:left.
*/
}
.content {
width: 67%;
float: right;
margin: 0;
padding: 1% 2%;
background-color: #465a60;
}
.content2 {
width: 67%;
float: right;
margin: 0;
padding: 1% 2%;
background-color: #FFF;
}
.header {
background-color: #003399;
width: 100%;
height: 100px;
}
.sidebar {
margin-right: 73%;
padding: 10px;
}
.clear {
clear: both;
height: 1px;
overflow: hidden; /* prevent IE expanding the container */
margin: 0; /* keep flush with surrounding blocks */
}
.footer {
background-color: #ffdf9d; /* same bg color as h1 */
color: #7d5500;
margin: 0; /* flush with .main */
padding: 1% 2%;
}
ul#sidemenu {
list-style-type: none;
line-height: 30px;
margin: 0px;
}
.nav {
font-size: 90%;
}
.nav ul {
margin: .3em;
padding: 0;
}
.nav li {
list-style: none;
/* display: inline; */
float: left;
padding: .5em 1em;
}
} /* end media rules */
</style>
<!-- protect other browsers from IE6's quirks -->
<!--[if IE 6]><style type="text/css" title="Site default">
h1, .sidebar {position:relative}</style><![endif]-->
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="main">
<div class="content">
<h2>Content</h2>
<p>The CSS is all contained in the page, it should be adaquately commented. View page source and see for yourself.</p>
<p>There are a few different techniques used for hiding CSS from various buggy browsers, mostly flavors of IE. This was tested in a whole bunch of browsers on Windows, Mac and Linux with satisfactory results.</p>
<p>Note that the horizontal menu can be styled any way you like, some possiblities are listed in the <a href="./">index</a>, such as a <a href="menu-2.html">horizontal list menu with rollovers</a>.</p>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre.</p>
<p>Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p>
</div> <!-- end content -->
<div class="content2">
<h2>Content</h2>
<p>The CSS is all contained in the page, it should be adaquately commented. View page source and see for yourself.</p>
<p>There are a few different techniques used for hiding CSS from various buggy browsers, mostly flavors of IE. This was tested in a whole bunch of browsers on Windows, Mac and Linux with satisfactory results.</p>
<p>Note that the horizontal menu can be styled any way you like, some possiblities are listed in the <a href="./">index</a>, such as a <a href="menu-2.html">horizontal list menu with rollovers</a>.</p>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre.</p>
<p>Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p>
</div> <!-- end content -->
<div class="sidebar">
<ul id="sidemenu">
<li>Home</li>
<li>Entry Gates</li>
<li>Home Entry Doors</li>
<li>Custom Designed Garage Doors</li>
<li>Sectional Garage Doors</li>
<li>Garage Door Options</li>
<li>Accessories</li>
<li>Service & Repair</li>
<li>Garage Components</li>
<li>FAQs</li>
<li>Company Info</li>
<li>Contact Us</li>
</ul>
</div> <!-- end sidebar -->
<!-- need a non-floating element to properly calculate container height -->
<div class="clear"></div>
</div> <!-- end main -->
<div class="footer">Footer</div>
</div> <!-- end wrapper -->
</body>
</html>
Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Fluid 2-Column CSS Layout</title>
<!-- styles suitable for any browser, any media -->
<style type="text/css" title="Site default">
body {
background-color: #fff5e1;
color: #000;
}
a:link {
color: #00c;
background-color: transparent;
}
a:visited {
color: #909;
background-color: transparent;
}
a:hover {
color: #513600;
background-color: transparent;
}
</style>
<!-- hide these rules from legacy browsers and mobile devices -->
<style type="text/css" title="Site default" media="all">
@media screen, projection {
/* exploit a parsing bug so @media rules are visible to MacIE5 */
.BeNiceToMacIE5 {
font-family: "\"}\"";
font-family: inherit;
}
body {
background-color: #fffaf0;
color: #000;
}
.wrapper {
padding: 0;
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
}
h1 {
background-color: #ffdf9d; /* different color than content */
color: #7d5500;
margin: 0;
padding: .2em 2%;
}
h2 {
margin: .2em 0;
}
.main {
clear: both;
width: 900px;
margin: 0;
padding: 0;
color: #000;
background: #fff5e1 url(images/2col-bg3.png) 25% 0 repeat-y;
/* background-color value is for content background.
Image is 2000px wide, ~25% is colored, where sidebar should be
(exact pixel count of colored area is actually closer to 26%).
Position corresponds to left sidebar, repeat img vertically.
Easily modified for right sidebar - just flip the image,
change bg position to 75% and change .content to float:left.
*/
}
.content {
width: 67%;
float: right;
margin: 0;
padding: 1% 2%;
background-color: #465a60;
}
.content2 {
width: 67%;
float: right;
margin: 0;
padding: 1% 2%;
background-color: #FFF;
}
.header {
background-color: #003399;
width: 100%;
height: 100px;
}
.sidebar {
margin-right: 73%;
padding: 10px;
}
.clear {
clear: both;
height: 1px;
overflow: hidden; /* prevent IE expanding the container */
margin: 0; /* keep flush with surrounding blocks */
}
.footer {
background-color: #ffdf9d; /* same bg color as h1 */
color: #7d5500;
margin: 0; /* flush with .main */
padding: 1% 2%;
}
ul#sidemenu {
list-style-type: none;
line-height: 30px;
margin: 0px;
}
.nav {
font-size: 90%;
}
.nav ul {
margin: .3em;
padding: 0;
}
.nav li {
list-style: none;
/* display: inline; */
float: left;
padding: .5em 1em;
}
} /* end media rules */
</style>
<!-- protect other browsers from IE6's quirks -->
<!--[if IE 6]><style type="text/css" title="Site default">
h1, .sidebar {position:relative}</style><![endif]-->
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="main">
<div class="content">
<h2>Content</h2>
<p>The CSS is all contained in the page, it should be adaquately commented. View page source and see for yourself.</p>
<p>There are a few different techniques used for hiding CSS from various buggy browsers, mostly flavors of IE. This was tested in a whole bunch of browsers on Windows, Mac and Linux with satisfactory results.</p>
<p>Note that the horizontal menu can be styled any way you like, some possiblities are listed in the <a href="./">index</a>, such as a <a href="menu-2.html">horizontal list menu with rollovers</a>.</p>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre.</p>
<p>Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p>
</div> <!-- end content -->
<div class="content2">
<h2>Content</h2>
<p>The CSS is all contained in the page, it should be adaquately commented. View page source and see for yourself.</p>
<p>There are a few different techniques used for hiding CSS from various buggy browsers, mostly flavors of IE. This was tested in a whole bunch of browsers on Windows, Mac and Linux with satisfactory results.</p>
<p>Note that the horizontal menu can be styled any way you like, some possiblities are listed in the <a href="./">index</a>, such as a <a href="menu-2.html">horizontal list menu with rollovers</a>.</p>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre.</p>
<p>Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p>
</div> <!-- end content -->
<div class="sidebar">
<ul id="sidemenu">
<li>Home</li>
<li>Entry Gates</li>
<li>Home Entry Doors</li>
<li>Custom Designed Garage Doors</li>
<li>Sectional Garage Doors</li>
<li>Garage Door Options</li>
<li>Accessories</li>
<li>Service & Repair</li>
<li>Garage Components</li>
<li>FAQs</li>
<li>Company Info</li>
<li>Contact Us</li>
</ul>
</div> <!-- end sidebar -->
<!-- need a non-floating element to properly calculate container height -->
<div class="clear"></div>
</div> <!-- end main -->
<div class="footer">Footer</div>
</div> <!-- end wrapper -->
</body>
</html>