Trent Chandra escribió:
> Hola lista.
> Estoy desarrollando una CSS y hace días que estoy varado en un problema
> que no consigo solucionar.
> Dicha CSS tiene una parte principal que flota a la izquierda y otra que
> lo hace a la derecha. La presentación en los navegadores es correcta,
> pero cuando se amplia desde el navegador, el tamaño del texto la sección
> flotante de la derecha pasa debajo de la sección que flota a la
> izquierda. He usado porcentajes justamente para que cuando ello ocurra
> mantenga las proporciones, pero no he podido solucionar el tema que deje
> de flotar a la derecha y lo envíe debajo. Estando las medidas expresadas
> en 'em' y en '%' ¿no debería guardar las proporciones y mantenerse
> flotando a la derecha? Además, los porcentajes expresados no son los que
> veo representados, las suma de ellos debe ser menos al 100%, ¿no
> entiendo el porqué?
>
El problema parece ser el overflow.
Cuando el texto es mas grande que el 60%, se cae.
Probá con overflow: auto o overflow:hidden en ambos floats.
Una pregunta:
No te conviene hacer dos float:left, y en el de la derecha, poner otro
div adentro con float:right ?
Martin.
> En este mensaje he puesto al CSS y el XHTML usado.
> Muchas gracias a todos por su tiempo.
> Saludos, Diego.
>
> -------------------------------------------------------------------------
> ***CSS***
> -------------------------------------------------------------------------
> * {
> border: 0;
> margin: 0;
> padding: 0;
> }
>
> body {
> width: 100%;
> text-align: center;
> font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
> }
>
> #contenedor {
> width: 780px;
> margin: 0 auto; /*centrar contenedor en body */
> padding-top: 2em;
> text-align: left;
> }
>
> #cabecera {
> background-color: White;
> color: Black;
> margin-top: 1em;
> margin-bottom: 1em;
> }
>
> #logo {
> position: relative;
> width: 480px;
> height: 90px;
> }
>
> #cuerpo {
> width: 780px;
> left: 50%;
> }
>
> #principal {
> float: left;
> width: 60%;
> display: inline;
> padding: 1em;
> overflow: auto;
> }
>
> .laterales {
> float: right;
> width: 12em;
> display: inline;
> margin-top: 2em;
> padding: 1em;
> overflow: auto;
> background-color: #FAFAD2;
> color: Black;
> }
>
> .cola {
> float: left;
> width: 6em;
> margin-bottom: 2em;
> font-size: 0.9em;
> }
>
> .colb {
> float: right;
> width: 6em;
> margin-bottom: 2em;
> font-size: 0.9em;
> }
>
> #principal p {
> font-size: 0.9em;
> /*margin: 0.3em 0;*/
> text-indent: 2em;
> /*letter-spacing: 0.1em;*/
> /*word-spacing: 0.1em;*/
> /*line-height: 2em;*/
> line-height: 1.5em;
> margin-top: 2em;
> margin-bottom: 2em;
> }
>
> #principal p:first-letter {
> float: left;
> font-size: xx-large;
> }
>
> p {
> font-size: 0.8em;
> margin: 0.3em 0;
> }
>
> /*
> #principal p:before {
> line-height: 4em;
> }
>
> #principal p:after {
> line-height: 12em;
> }*/
>
> a:link {
> color: #1e90ff;
> font-weight: bold;
> text-decoration: none;
> border-bottom: 1px dotted #2f5dde;
> }
>
> a:visited {
> color: #005fbb;
> font-weight: bold;
> text-decoration: none;
> border-bottom: 1px dotted #2f5dde;
> }
>
> a:hover {
> color: #000;
> border: 0;
> text-decoration: underline;
> }
>
> a:focus {
> background: #f9f7f4;
> color: #cc0000;
> }
>
> a:active {
> background: #f9f7f4;
> color: #000;
> border: 0;
> text-decoration: underline;
> }
>
> .frase {
> clear: both;
> margin-top: 1em;
> margin-bottom: 1em;
> padding: 1em;
> font-weight: bolder;
> background-color: Aqua;
> color: White;
> width: 80%;
> }
>
> -------------------------------------------------------------------------
> ***XHTML***
> -------------------------------------------------------------------------
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";>
> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="es">
> <head>
> <title>Sitios ....</title>
> <meta name="description" content="Desarrollo y diseño de ..." />
> <meta name="keywords" content="diseño, desarrollo,
> accesibilidad, usablidad, xhtml, css, diseño corporativo" />
> <link rel="shortcut icon" href="sitcol.ico" type="image/x-icon" />
> <meta http-equiv="content-type" content="application/xhtml+xml;
> charset=iso-8859-1" />
> <!--<meta http-equiv="content-type" content="text/html;
> charset=iso-8859-1" />-->
> <link rel="stylesheet" href="sitcol.css" type="text/css"
> media="all" />
> </head>
> <body>
> <div id="contenedor">
> <div id="cuerpo">
> <div id="principal">
> <div id="cabecera">
> <img src="sitcol.png" alt="Sitios ..."
> width="480" height="90" id="logo" />
> </div>
> <p>Lorem ipsum dolor sit amet, consectetuer
> adipiscing elit. Nam sem. Suspendisse sollicitudin.
> ......</p>
> <p>Mauris nec ipsum et erat nonummy ultricies. Nulla
> lobortis. Curabitur adipiscing leo et purus. Vivamus
> nec sem..........</p>
> <p>Pellentesque vehicula, augue ut lacinia blandit,
> turpis magna semper eros, at tincidunt erat massa a
> lacus. ............</p>
> </div>
> <div class="laterales">
> <div class="cola">
> <p>Lorem Pellentesque vehicula, augue ut lacinia
> blandit, turpis magna semper eros,
> at tincidunt erat massa a lacus. Proin ultrices
> condimentum ipsum. Sed vehicula
> lorem at lacus. In consectetuer interdum diam.
> Praesent eget sapien.</p>
> </div>
> <div class="colb">
> <p>Ipsum Pellentesque vehicula, augue ut lacinia
> blandit, turpis magna
> semper eros, at tincidunt erat massa a lacus.
> Proin ultrices condimentum ipsum. Sed
> vehicula lorem at lacus. In consectetuer
> interdum diam. Praesent eget sapien.</p>
> </div>
> <div class="frase">
> <a href="/diecol.html" accesskey="a" title="este
> enlace .....">Este enlace es una prueba</a></p>
> </div>
> <div class="frase">
> <q
> cite="http://www.ejemplo.com/trabajosamorperdido";>
> ¡Recompensa! ¡Oh! Esa es la palabra latina para
> tres peniques.
> William Shakespeare (Trabajos de amor perdido).</q>
> </div>
> </div>
> </div>
> </div>
> </body>
> </html>
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a [email protected]
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
>
--
Martin Szyszlican
http://www.ylisto.info
"Si este mensaje fué muy largo, fué poco profundo"
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
