A few things that might help:
>1. On my fixed column, I set the background color to yellow. Why it doesn’t show?
Unlike table cells, adding <div> elements without content will not have a specific height on the page. Your yellow column is probably there, but it probably has no height. Try adding min-height: 600px; to your CSS rule and see if it shows up.
Also, absolute positioning will probably not do what you want since it removes each element with absolute positioning from the layout of the page. You probably need to use another div (a parent div) as a wrapper for all of your contents and set it to be 100% width and height.
>2. On my Ultimate Parent menu, the submenu is set to block, but it is still shown as inline. How to fix that?
I did not plug it in to MODX, so I am not certain about your menu
>3. My footer is set to bottom: 20 px. and it is shown on top. Do I miss anything?
Again, this is a result of your absolute positioning. After removing the other absolute positioning the footer may be set to position: absolute and will appear on the bottom.
I’m not sure what your layout should look like but here is an example with a wrapper and the absolute positioning removed and background colors added to outline the left and right columns:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>[(site_name)] - [*pagetitle*]</title>
<meta http-equiv="content-type" content="text/html; charset=[(modx_charset)]" />
<base href="[(site_url)]"></base>
<style type="text/css">
*html, body {border: 0; margin: 0; padding: 0;}
body { font: 100%/1.25 arial, helvetica, sans-serif; background:#e5e5e5; color: #000; }
#wrap {
float: left;
height: 100%;
width: 100%;
}
#column1 {
width:25%;
background-color: yellow;
float:left;
height: 100%;
min-height: 600px;
}
#col1inner{}
#column2 {
width:50%;
float: left;
}
#column3 {}
#column3outer{
width:25%;
float:right;
background-color: green;
min-height: 600px;
}
#top { }
#logo{ }
#header {
text-align: left;
}
#title {
text-align: left;
}
#menu {
top: 80px;
left: 325px;
text-align: left;
}
#menu ul li
{
width: auto;
display: inline;
float: left;
list-style: none;
text-transform: uppercase;
font-size: 0.6em;
padding: 0 1em; /* spacing between menu items experiment with this*/
color:black;
}
#menu ul li a {
text-decoration: none;
text-transform: uppercase;
}
#menu ul li a:hover, #menu ul li a.active {
color: red;
}
#content {
width: 100%
}
#sub {
top: 100px;
text-align: left;
}
#sub ul li {
width: auto;
display: block;
float: left;
text-transform: uppercase;
font-size: 0.6em;
padding: 0 1em; /* spacing between menu items experiment with this*/
color:Black;
}
#sub ul li a {
text-decoration: none;
text-transform: uppercase;
}
#sub ul li a:hover, #menu ul li a.active {
color: Red;
}
#data {
top:150px;
left:0px;
padding: 10px 0px;
text-align: left;
background-color: white;
}
#footer {
height: 90px;
position: absolute;
bottom: 20px;
left: 0px;
width:100%
}
</style>
</head>
<body>
<div id="wrap">
<div id="column1"><div id="col1inner"></div></div>
<div id="column2">
<div id="top">
<div id="logo">
<img src="assets/images/3PLogo.jpg"></img>
</div>
<div id="header">
<p>Simple to use software</p>
<p>Stress free system</p>
<p>$$$ making strategy</p>
</div>
<h3 id="title">[*longtitle*]</h3>
<div id="menu">
[[Wayfinder? &startId=`0` &outerTpl=`menuContainer` &rowTpl=`menuRows` &level=`1`]]
</div>
</div>
<div id="content">
<div id="sub">
[!Wayfinder? &startId=`[[UltimateParent]]` &outerTpl=`menuContainer` &rowTpl=`menuRows` &level=`1`!]
</div>
<div id="data">
[*#content*]
</div>
</div>
</div>
<div id="column3outer"><div id="column3"></div></div>
<div id="footer">
<p>Footer, copyright, disclaimer</p>
</div>
</div>
</body>
</html>
