Hola a todos y gracias por responder, volví nuevamente a esta pregunta porque aún no lo resuelvo (sí, aún u.u)
Este es mi index, hice recién la estructura, he estado intentado hace lo que me dice LucasAddams, pero no doy con hacer funcionar.
Si alguien me da otra vuelta de tuerca puede que lo pille u otro ejemplo no se..
Les dejo lo que llevo hasta aquí
index.html Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<title>TodoVelero</title>
<meta charset="utf-8">
<meta name="description" content="" />
<style type="text/css">
/* --------- demo presentation------------ */
body {font: normal 16px/1.5em helvetica, aria, sans-serif; text-align: center;}
#demo-nav {width: 200px; margin: 10px auto; list-style: none; overflow: hidden}
#header, #footer {padding:5px; height: 50px; background: #0080FF; color:#fff}
#primary, #content, #secondary {height: 300px; padding: 50px 0}
#primary p, #content p, #secondary p {font-weight: bold}
#primary {background:#eee;}
#content {background:#819FF7;}
#secondary {background:#ddd;}
pre {text-align: left; margin:20px auto; width:100px}
/* --------------------------------------- */
/* ----- set width and center layout ----- */
#container {
width:1200px;
margin:20px auto;
}
/* --------------------------------------- */
/* ----------- float columns ------------- */
#primary {
float:left;
width:200px;
}
#content {
float:left;
width:800px;
}
#secondary {
float:left;
width:200px;
}
/* --------------------------------------- */
/* --------------------------------------- */
#footer {
clear:both;
}
/* --------------------------------------- */
.menuizq{margin:0; padding:0; width:195px; list-style:none;background:rgb(255,255,255);}
.menuizq li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menuizq li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('verMenuImages.png') 0px 0px no-repeat; text-decoration:none;}
.menuizq li a:hover{background:url('verMenuImages.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.menuizq li a.active, .menu li a.active:hover{background:url('verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menuizq li a span{line-height:40px;}
.menuder{margin:0; padding:0; width:195px; list-style:none;background:rgb(255,255,255);}
.menuder li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menuder li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('verMenuImages.png') 0px 0px no-repeat; text-decoration:none;}
.menuder li a:hover{background:url('verMenuImages.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.menuder li a.active, .menu li a.active:hover{background:url('verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menuder li a span{line-height:40px;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<p>TodoVelero</p>
</div>
<div id="primary">
<ul class="menuizq">
<li><a href="#" class="active" target="_top"><span>Carpas</span></a></li>
<li><a href="#"><span>Cubrecokpit</span></a></li>
<li><a href="#"><span>Bimini Top</span></a></li>
<li><a href="#"><span>Toldos</span></a></li>
<li><a href="#"><span>Cierres/Ventanas</span></a></li>
</ul>
</div>
<div id="content">
Contenido
</div>
<div id="secondary">
<ul class="menuizq">
<li><a href="#" class="active" target="_top"><span>Carpas</span></a></li>
<li><a href="#"><span>Fundas velas</span></a></li>
<li><a href="#"><span>Bolsillos</span></a></li>
<li><a href="#"><span>Cojines</span></a></li>
<li><a href="#"><span>Chubasqueras</span></a></li>
</ul>
</div>
<div id="footer">
<p>Pie página</p>
</div>
</div>
</body>
</html>