como poner columnas y contenido a mi footer

[Souldhack]

hola amigos, mi pregunta es que ya tengo la barra footer en mi web pero lo que quiero es ponerle contenido, gadgets, columnas y quisiera que me ayudaran a poder construirlo, espero y me ayuden, miren quiero hacer el footer parecido a este http://i56.tinypic.com/2luou8i.png no quiero que sea esactamente igual pero esa es mi idea

diseño css de mi footer

#footer {
padding:0;
width:100%;
height: 50px;
margin:0;
right: 0;
background-color: #000000;
position:absolute;
}

[ArturoGallegos]

coloca dos div principales en el primero coloca un overflow:hidden y en su interior 3 div con ancho al 33% y dales un float:left; y en tu segundo div principal coloca el menú

Código HTML:

<div>
    <div>columna 1</div>
    <div>columna 2</div>
    <div>columna 2</div>
</div>
<div>menu footer</div>
 

[Souldhack]

Iniciado por Ag666

coloca dos div principales en el primero coloca un overflow:hidden y en su interior 3 div con ancho al 33% y dales un float:left; y en tu segundo div principal coloca el menú

Código HTML:

<div>
    <div>columna 1</div>
    <div>columna 2</div>
    <div>columna 2</div>
</div>
<div>menu footer</div>
 

Me podrias explicar un poco mas es que apenas empiezo con todo esto de los css, gracias

[ArturoGallegos]

lo invito a leer sobre posisionamiento flotante
http://librosweb.es/css/capitulo5/po..._flotante.html

y con respecto a lo que busca conseguir le dejo el siguiente codigo de ejemplo

Código CSS:

#footer{clear:both;width:900px;margin:10px auto;}
#footer .panel1 div{width:33%;float:left;border:1px #ccc solid;}
#footer .panel2{width:80%;margin:auto;}
#footer .panel2 a{float:left;}
#footer .panel2 ul{float:right;margin:0;padding:0;}
#footer .panel2 ul li{display:inline;}
 

Código HTML:

<div id="footer">
    <div class="panel1">
        <div>elemento 1</div>
        <div>elemento 2</div>
        <div>elemento 3</div>
    </div>
    <div class="panel2">
    <a href="#" class="copyright">copy right</a>
    <ul>
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">link 3</a></li>
        <li><a href="#">link 4</a></li>
    </ul>
    </div>
</div>
 

[Souldhack]

Iniciado por Ag666

lo invito a leer sobre posisionamiento flotante
[url]http://librosweb.es/css/capitulo5/posicionamiento_flotante.html[/url]

y con respecto a lo que busca conseguir le dejo el siguiente codigo de ejemplo

Código CSS:

#footer{clear:both;width:900px;margin:10px auto;}
#footer .panel1 div{width:33%;float:left;border:1px #ccc solid;}
#footer .panel2{width:80%;margin:auto;}
#footer .panel2 a{float:left;}
#footer .panel2 ul{float:right;margin:0;padding:0;}
#footer .panel2 ul li{display:inline;}
 

Código HTML:

<div id="footer">
    <div class="panel1">
        <div>elemento 1</div>
        <div>elemento 2</div>
        <div>elemento 3</div>
    </div>
    <div class="panel2">
    <a href="#" class="copyright">copy right</a>
    <ul>
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">link 3</a></li>
        <li><a href="#">link 4</a></li>
    </ul>
    </div>
</div>
 

hola amigo gracias por esos cosejos, pero lo que pasa es que me quedan en la parte izquierda y yo los queria un tanto abajo , mira mi idea es esta http://i56.tinypic.com/2luou8i.png
no quiero que sea igual, espero que me ayudes a hacer similar ese contenido del footer que quiero, espero tu respuesta , gracias

[ArturoGallegos]

amigo mio, yo no le he dado un código exacto para hacer copy-paste solo he proporcionado un código de ejemplo para colocar su contenido en 3 columnas tal como lo muestra en la foto que nos indica. sírvase leer la guía de css que le he proporcionado para ajustar cada detalle.

para conseguir su diseño le sugiero leer sobre las propiedades float, margin, padding, background, clear