Consulta para template

neomessiah · #1 (**permalink**) 21/07/2008, 23:32

Hola, quería consultarles que posiblemente sea sencillo pero la verdad es que escapa de mis conocimientos xD...quiero crear un template con la siguiente estructura:

Como verán el problema reside en los dos cuadros o divisiones de abajo, quiero lograr que uno este a la derecha y otro a la izquierda siendo ambos independientes de tal manera que el de la derecha tenga un scroll bar y no "afecte" a su par.
Cualquier ayuda es bienvenida, muchas gracias.

jacin · #2 (**permalink**) 22/07/2008, 00:58

www.librosweb.es

Carxl · #3 (**permalink**) 22/07/2008, 08:04

Hola neomessiah, cómo vas?

Siendo un poco mas puntual, lee sobre el atributo float

Es el que te permite flotar(de ahí su nombre), en tu caso.. un div a la izquierda o la derecha.

No se te olvide que los dos div's deben tener un ancho específico, ya sean px, %, em.. Tú verás la unidad de medida, pero que no se te olvide colocarlos

Saludos

poison_mayer · #4 (**permalink**) 22/07/2008, 08:30

revisando en Internet te encontre esto muy fácil solo hube de modificar la altura de #content y overflow: auto y ya tienes scroll

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>CSS TEMPLATE 02a</title>

<style type="text/css" media="screen"></style></head><body>
<p align="right">
<a href="http://www.intensivstation.ch/"><img src="temp02a_files/css_logo.gif" alt="" border="0" height="56" width="414"></a></p>
<h1>service for a better code</h1>

<div id="menu"><h2>right column</h2>
<pre>#menu {
float: left;
width: 25%;
background-color: #ff99CC;
overflow: auto;
}

</pre>
<p>
<img src="temp02a_files/xhtml10.gif" alt="" border="0" height="15" width="80"><br>
<img src="temp02a_files/css.gif" alt="css" border="0" height="15" width="80"><br>
<a href="http://www.monorom.to/"><img src="temp02a_files/monorom.gif" alt="monorom" border="0" height="15" width="80"></a><br>

<a rel="license" href="http://creativecommons.org/licenses/by/1.0/"><img src="temp02a_files/cc.gif" alt="Creative Commons License" border="0" height="15" width="80"></a><br>
This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/1.0/">Creative Commons License</a>.

</p>
</div>

<div id="content">
<h2>content column</h2>
<p>All templates are XHTML 1.0 and CSS2/ tableless.</p>
<p><b>2 columns / menu and content dynamic</b><br>
2 column layout grid. The navigation column and content column are dynamic and adjust themselves to the browser window.<br>
This layout also works with an absolute height <a href="http://www.intensivstation.ch/files/en_templates/temp02a_100height.html">TEMPLATE 100% height</a><br>
<a href="http://www.intensivstation.ch/en/templates/">Â«= more TEMPLATES</a><br>
</p>
<pre>html {
padding:0px;
margin:0px;
}

body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px 20px;
margin:0px;
}

#content {
float: left;
width: 75%;
background-color: #fff;
margin:0px 0px 50px 0px;
overflow: auto;
}
</pre>

</div>

</body></html>