crear plantilla de 2 columnas (duda)

callter · #1 (**permalink**) 05/12/2010, 02:59

hola,

Necesito algo de ayuda o mas bien un ejemplo de como hacerle para ponerle 2 columnas a una plantilla....mas explicado me refiero a una columna izquierda y otra a la derecha.

Hasta el momento no logro que quede bien les dejo el codigo hasta el momento de ejemplo.

Código:

<html>
<head>
<title></title>
<style type="text/css">
body  {
         background: brown;
         font-family: arial;
         font-size: 14px;
         text-align: center;
}

#container {
text-align: left;
width: 990px;
margin: auto;
}

#header {
         width: 990px;
         height: 180px;
         background: greenlime;
}

.logo {
         background: url();
}

#mainnav {
         width: 990px;
         height: 40px;
         background: #000;
}

#mainnav ul {
         list-style-type: none;
         padding: 5px;
}

#mainnav ul li {
         display: inline;
}

#mainnav ul li a {
         text-decoration: none;
         margin: 30px;
         padding: 10px;
         color: blue;
}

#sidebar_left {
         width: 200px;
         background: url() repeat;
}

.box_left {
}

.box_left ul {
         list-style-type: none;
         float: left;
         padding: 10px;
         margin: 10px;
}

.box_left ul li {
         display: block;
         margin: 10px;
}

.box_left ul li a {
         text-decoration: none;
         color: #0B615E;
}

#sidebar_right {
         width: 200px;
         float: right;
         background: url() repeat;
}

.box_right ul {
         list-style-type: none;
         float: right;
         padding: 10px;
         margin: 10px;
}

.box_right ul li {
         display: block;
         margin: 10px;
}

.box_right ul li a {
         text-decoration: none;
         color: #0B615E;
}

#footer {
         clear: both;
}


</style>
</head>
<body>
<div id="container">
         <div id="header" title="gremio tekken">
    <div class="logo"></div>
</div>
         <div id="mainnav">
      <ul>
              <li><a href="#">enlace</a></li>
              <li><a href="#">enlace</a></li>
              <li><a href="#">enlace</a></li>
              <li><a href="#">enlace</a></li>
      </ul>
</div>
         <div id="content">

</div>
         <div id="sidebar_left">
   <div class="box_left">
<div class="separator_box"></div>
      <ul>
              <li><a href="#">enlace</a></li>
              <li><a href="#">enlace</a></li>
              <li><a href="#">enlace</a></li>
              <li><a href="#">enlace</a></li>
      </ul>             
</div>
   <div class="box_left">
<div class="separator_box"></div>
      <ul>
              <li><a href="#">enlace</a></li>
              <li><a href="#">enlace</a></li>
              <li><a href="#">enlace</a></li>
              <li><a href="#">enlace</a></li>
      </ul>             
</div>
         <div id="sidebar_right">
   <div class="box_right">
<div class="separator_right"></div>
      <ul>
              <li><a href="#">enlace</a></li>
              <li><a href="#">enlace</a></li>
              <li><a href="#">enlace</a></li>
              <li><a href="#">enlace</a></li>
      </ul> 
   </div>  
</div>
   <div class="box_right">
<div class="separator_right"></div>
      <ul>
              <li><a href="#">enlace</a></li>
              <li><a href="#">enlace</a></li>
              <li><a href="#">enlace</a></li>
              <li><a href="#">enlace</a></li>
      </ul>
  </div>   
</div>
         <div id="footer">
copyright &copy 2010 <a href="#"></a> diseño por <a href="#"></a> ímagenes por <a href="#"></a>
  </div>
</div>
</body>
</html>

no se por que el sidebar derecho no se coloca a la derecha de la plantilla y siendo que en el css le meto float: right;

EDITO POST Encontre la solucion una vez despues de postear el tema y examinarlo bien T_T

el problema eran los divs no los estaba cerrando donde eran y por ese error el float right no tomaba la propiedad.

disculpen la molestia.

Pueden cerrar el tema

saludos!