Hola a todos!
que tal, con poco tiempo ya hacia rato no tocaba un project personal que tengo; se trata de una aplicacion web para una firma de abogados. Esto me lo propuso un amigo de mi familia, y bueno he tirado cabeza a las funciones que tendrá; sin embargo ahorita ando haciendo el diseño de la aplicación web.

Como lo he planeado:
- Header: Sencillo, me parece que en una aplicación web, no debe haber distracciones; algo sencillo con el logo de la firma y para de contar.

--- Tres columnas:
- Columna de la izquierda: tendrá un menú principal de manera vertical .
- Columna central: para el contenido/mostrar info
- Columna de izquierda: otro menú vertical, esta vez será uno secundario; con algunas herramientas y opciones.

--- Dos footer (Pie de página)
- el primero: será un footer secundario en donde pienso colocar ciertos controles, como: Control de Recordatorio, Control de Calendario, y Acceso rapido al control de agenda. Este footer secundario deseo colocarlo... al final de las tres columnas.
- footer principal: Este será fijo. y se utilizará de manera parecida al taskBar de esta pagina; en donde se colocan las conversaciones del chat, mail, sesion, relog, etc.

Ahora bien, encontre un ejemplo de como hacer el footer de tres columnas, sin embargo al implementarlo en mi project, me he estancado.

aqui dejo, dos imagenes para que tengan una idea de lo que deseo hacer:

Acá les dejo el codigo, tanto el html como el css.

Código Fuente: Css


body,
html{
    margin:0;
    padding:0;
}
body {
    min-width:720px; /* Prevent content from becoming unreachable in Gecko */
}
/* position:absolute for all browsers - the whole page scrolls */
div#headerwrap {
    position:absolute;
    width:100%;
    top:0;
    left:0;
    height:50px;
}
/* position:fixed for modern browsers - header and footer do not scroll */
body>div#headerwrap {
    /*position:fixed;*/
}
div#header {
    height:50px;
    width:100%;
    margin:0 auto;
}
/* set a left margin to compensate for IE/Win always making room for a scrollbar */
div#middlewrap {
/* set left margin and bottom padding for IE5/Win */
    padding:50px 0 0 0;
    margin-left:0;
/* set left margin and bottom padding for others */
    voice-family: "\"}\""; 
    voice-family:inherit;
    margin-left:16px;
    padding-bottom:50px;
}
/* set left margin for modern browsers */
body>div#middlewrap {
    margin-left:0;
}
div#middle {
    width:100%;
    margin:0 auto;
}
div#sidebar {
    width:180px;
    float:left;
}


div#sidebard {
    width:180px;
    float:right;
}


div#content {
    padding:0 10px;
    margin-left:180px;
    margin-right:180px;
}
/* no positioning for IE5/Win - the whole page scrolls */
div#footerwrap {
    width:100%;
    p\osition:absolute;
    bottom:0;
    left:0;
    height:50px;
}
body>div#footerwrap {
    position:fixed;
}
div#footer {
    height:50px;
    width:100%;
    margin:0 auto;
}

/*Comienzo ---> footer no-fijo*/

/* footer */

#footer-wrap {

    clear: both;

    width: 920px;

    text-align: left;

    padding: 0;    margin: 0;

    background: url(footer-bottom.gif) no-repeat left bottom;        

}

#footer-content {

    width: 920px;

    background: url(footer-top-sep.gif) no-repeat;    

    padding: 30px 0 35px 0;

}



#footer-wrap p {

    padding:10px 0;

}

#footer-wrap h3 {

    color: #145F94; 

    margin: 0;

    padding: 5px 0 5px 10px; 

    text-transform: uppercase;

}

#footer-wrap a:hover { 

    color: #000; 

    text-decoration: none;

}



#footer-columns {

    color: #888;

    margin:  0 auto; 

    padding: 0;    

    width: 800px;        

}

#footer-columns ul {

    list-style: none;

    margin: 0; 

    padding: 0;    

    border-top: 1px solid black;

}

#footer-columns li {

    border-bottom: 1px solid #CCDA9E;        

}

#footer-columns li a {

    display: block;

    font-weight: normal;

    padding: 8px 0 15px 15px;

    width: 96%;

    color: #666666;    

}



#footer-columns .col3, .col3-center {

    float: left;

    width: 30%;
    border: 1px solid black;

}

#footer-columns .col3-center { 

    margin: 0 15px; 

}

/*FIN -----> footer no-fijo*/

/* Styling rules to make this demo page look nice. */
body,
html{
    font-family:"Trebuchet MS", Georgia, Verdana, serif;
    color:#000;
    background:#aaa;
}
div#header,
div#footer {
    background:#333;
    color:#eee;
}
div#middle,
div#sidebar,
div#sidebard {
    background:#eee;
}
div#content {
    background:#fff;
}
h1,
h2 {
    padding:0;
    margin:0;
}
div#sidebar h2,
div#sidebard h2 {
    padding-left:5px;
}
div#footer h2 {
    text-align:center;
    padding:0;
    margin:0;
}
div #footer p {
    margin:0;
    padding:0;
    text-align:center;
}
div#footer a {
    color:#fff;
}
h1 {
    font-size:1.4em;
    text-align:center;
    padding-top:5px;
}
h2 {
    font-size:1.2em;
    padding-top:1em;
    margin-top:0;
}
p {
    margin-bottom:0;
    font-size:0.8em;
    line-height:1.4em;
}
pre {
    font-size:0.9em;
    line-height:1.4em;
}
ul {
    font-size:0.8em;
    line-height:1.4em;
}
.adwrap,
.adwrap iframe {
    width:300px;
    height:250px;
}
.adwrap {
    float:left;
    margin:1em 10px 0 0;
}
    </style>
<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css">
<![endif]-->

Código Fuente: HTML


<html>
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" />

</head>

<body>
<body>
<div id="headerwrap">
    <div id="header">
        <h1>Firma de Abogados "FULANITOS & ASOC."</h1>
    </div>
</div>
<div id="middlewrap">
    <div id="middle">
        <div id="sidebar">
            <h2>Pasos</h2>
            <ul>
      <li><a href="#">Bienvenido</a></li>
      <li><a href="#">Configurando el Sistema</a></li>
      <li><a href="#">Configurando Base de Datos</a></li>
      <li><a href="#">Creando usuario Root</a></li>
      <li><a href="#">Creando administradores</a></li>
      <li><a href="#">Información de la Empresa</a></li>
      <li><a href="#">Creando usuarios</a></li>
      <li><a href="#">Configuración Finalizada</a></li>
            </ul>
        </div>

        <div id="sidebard">
            <h2>Pasos</h2>
            <ul>
      <li><a href="#">Bienvenido</a></li>
      <li><a href="#">Configurando el Sistema</a></li>
      <li><a href="#">Configurando Base de Datos</a></li>
      <li><a href="#">Creando usuario Root</a></li>
      <li><a href="#">Creando administradores</a></li>
      <li><a href="#">Información de la Empresa</a></li>
      <li><a href="#">Creando usuarios</a></li>
      <li><a href="#">Configuración Finalizada</a></li>
            </ul>
        </div>

        <div id="content">

            <h2>Bienvenido</h2>
            <p>Lawyer-Admin, es una aplicación web para administrar/gestionar firmas de abogados. Presenta varias caracteristicas y herramientas, para facilitar el trabajo, el acercamiento de los abogados a sus clientes, y sobre todo ayuda a lograr gestionar los casos.</p>

<p>Entre las caracteristicas, que incluye Lawyer-Admin, están:</p>
<ul>
<li>Registro de usuarios</li>
<li>Panel de Administrción</li>
<li>Panel de Usuarios</li>
<li>Control de Comunicación</li>
<li>Calendario</li>
<li>Recordatorios</li>
<li>Agenda</li>
<li>Control de Casos</li>
<li>Control de Pagos</li>
<li>Un excelente Editor de Texto</li>
<li>Control de Imagenes</li>
<li>Control de Historial</li>
<li>Control de Reportes</li>
</ul>
    
<p>Lawyer-Admin, es una aplicación que se ajusta a sus necesidades; sí desea o no utilizar una de las caracteristicas mencionadas, lo podrá elegir. Es decir podrá activar/desactivar cualquier caracteristica; siempre y cuando no afecte a ningun funcionamiento.
Aparte que podrá agregar nuevas caracteristicas, agregando pluggins; le aseguramos no necesitará ningún otro software.</p>

<p>Para ver los requerimientos de Lawyer-Admin, visite esta pagina.</p>

<p>Sí tiene alguna pregunta, visite la pagina de preguntas frecuentes(FAQ), o adquiera nuestro manual de uso. Recuerde que para soporte y/o ayuda, puede visitar nuestra pagina web.
</p>

<p>Lawyer-Admin, es una aplicación web para administrar/gestionar firmas de abogados. Presenta varias caracteristicas y herramientas, para facilitar el trabajo, el acercamiento de los abogados a sus clientes, y sobre todo ayuda a lograr gestionar los casos.</p>

<p>Entre las caracteristicas, que incluye Lawyer-Admin, están:</p>
<ul>
<li>Registro de usuarios</li>
<li>Panel de Administrción</li>
<li>Panel de Usuarios</li>
<li>Control de Comunicación</li>
<li>Calendario</li>
<li>Recordatorios</li>
<li>Agenda</li>
<li>Control de Casos</li>
<li>Control de Pagos</li>
<li>Un excelente Editor de Texto</li>
<li>Control de Imagenes</li>
<li>Control de Historial</li>
<li>Control de Reportes</li>
</ul>
    
<p>Lawyer-Admin, es una aplicación que se ajusta a sus necesidades; sí desea o no utilizar una de las caracteristicas mencionadas, lo podrá elegir. Es decir podrá activar/desactivar cualquier caracteristica; siempre y cuando no afecte a ningun funcionamiento.
Aparte que podrá agregar nuevas caracteristicas, agregando pluggins; le aseguramos no necesitará ningún otro software.</p>

<p>Para ver los requerimientos de Lawyer-Admin, visite esta pagina.</p>

<p>Sí tiene alguna pregunta, visite la pagina de preguntas frecuentes(FAQ), o adquiera nuestro manual de uso. Recuerde que para soporte y/o ayuda, puede visitar nuestra pagina web.
</p>



<form action="#">
<input class='button' type='submit' Value='Siguiente' />
</form>


        </div>
    </div>
</div>

<div id="footerwrap">
    <div id="footer">
        <a href="#"><h2>Lawyer-Admin</h2></a>
<div id="labfooter">
    <p><a href="#">FAQ</a> | <a href="#">Ayuda</a> | Licencia</p>
</div>
    </div>
</div>

    <!-- footer starts -->        

    <div id="footer-wrap"><div id="footer-content">

    

        <div id="footer-columns">    

            <div class="col3">

                <h3>Columna 1</h3>

                <ul>

                    <li><a href="index.html">HOLA COLUMNA 1</a></li>

                    <li><a href="index.html">HOLA COLUMNA 1</a></li>

                    <li><a href="index.html">HOLA COLUMNA 1</a></li>

                    <li><a href="index.html">HOLA COLUMNA 1</a></li>

                    <li><a href="index.html">HOLA COLUMNA 1</a></li>

                </ul>

            </div>



            <div class="col3-center">

                <h3>Columna 2</h3>

                <ul>

                    <li><a href="index.html">HOLA COLUMNA 2</a></li>

                    <li><a href="index.html">HOLA COLUMNA 2</a></li>

                    <li><a href="index.html">HOLA COLUMNA 2</a></li>

                    <li><a href="index.html">HOLA COLUMNA 2</a></li>

                    <li><a href="index.html">HOLA COLUMNA 2</a></li>

                </ul>

            </div>



            <div class="col3">

                <h3>Columna 3</h3>

                <ul>

                    <li><a href="index.html">HOLA COLUMNA 3</a></li>

                    <li><a href="index.html">HOLA COLUMNA 3</a></li>

                    <li><a href="index.html">HOLA COLUMNA 3</a></li>

                    <li><a href="index.html">HOLA COLUMNA 3</a></li>

                    <li><a href="index.html">HOLA COLUMNA 3</a></li>                    

                </ul>

            </div>

        <!-- footer-columns ends -->

</body>

</html>