Forum Moderators: not2easy
========================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>glish.com : CSS layout techniques : 2 columns, ALA style</title>
<style type="text/css">
@import "all.css"; /* just some basic formatting, no layout stuff */
body {
margin:0px 0px 0px 0px;
}
#leftcontent {
float:left;
width:67%;
background:#fff;
border-right:2px solid #000;
border-bottom:2px solid #000;
margin-right:15px;
padding-bottom:20px;
}
#rightcontent {
}
p,h1,pre {
margin:0px 30px 10px 30px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#rightcontent p {
font-size:10px;
margin-left:0px;
}
</style>
</head><body>
<div id="leftcontent">
<h1><a href="home.asp">LAYOUT TECHNIQUES</a>: 2 columns, ALA style</h1>
</div>
<div id="rightcontent">
<h1>rightcontent</h1>
<p>
This page is part of <a href="home.asp">CSS Layout Techniques</a>, a resource for web developers and designers.
</p>
<p>
Other Layout Techniques:<br/>
<a href="7.asp">3 columns, the holy grail</a><br/>
<a href="9.asp">2 columns, ALA style</a><br/>
<a href="8.asp">4 columns, all fluid</a><br/>
<a href="2.asp">3 columns, all fluid </a><br/>
<a href="3.asp">static width and centered</a><br/>
<a href="1.asp">nested float</a><br/>
</p>
<p>
Does it <a href="http://validator.w3.org/check?uri=http://www.glish.com/css/9.asp?noSRC=true">validate</a>?
</p>
</div>
</body>
</html>
=========================================================
The problem with this html code is that if the right hand column navigational menu has more content than the left hand column (content area) then the right hand column wraps around and displays below the left hand column!
Anyone can test this out by copying the code above and displaying the file on a browser.
Can anyone please advise of a fix for this? Thanks!
