¿Como flotar un blockquote fuera del div que lo contiene?

K3NNY · #1 (**permalink**) 06/12/2006, 15:08

Dado este código HTML...

Código HTML:

<div>
	<p>Lorem ipsum dolor sit amet.</p>
	<p>Lorem ipsum dolor sit amet.</p>
	<blockquote>
		<p>Lorem ipsum dolor sit amet.</p>
	</blockquote>
	<p>Lorem ipsum dolor sit amet.</p>
	<p>Lorem ipsum dolor sit amet.</p>
</div>

...como podría hacer para que el div ocupe la mitad izquierda de la pantalla y el blockquote "flote" en la mitad derecha? El div NO puede medir todo el ancho de la pantalla, solo la mitad izquierda.

¿Es posible con CSS "sacar" el blockquote fuera del div sin usar posición absoluta?

kahlito · #2 (**permalink**) 06/12/2006, 22:26

Hola K3NNY, prueba con esto.

Código HTML:

<style type="text/css">
blockquote {
	position:relative;
	margin-left:50%;
	}
</style>
</head>

<body>
<div>  
<p>Lorem ipsum dolor sit amet.</p>  
<p>Lorem ipsum dolor sit amet.</p>  
<blockquote><p>Lorem ipsum dolor sit amet.</p></blockquote>
<p>Lorem ipsum dolor sit amet.</p>  
<p>Lorem ipsum dolor sit amet.</p> 
</div>
</body>

Mikmoro · #3 (**permalink**) 07/12/2006, 04:42

Esa es una buena solución, pero puede haber un problema: si tal y como has dicho, le das a tu div un ancho del 50%, el margen de 50% del blockquote se contará con respecto a su caja contenedora, es decir, el div, por lo que creo que quedaría a un 25% del margen izquierdo.

Si lo haces así, una buena solución sería darle al blockquote un margen izquierdo del 110%, es decir, todo el ancho del div más un 10% de margen para que no se pegue.
Mikel.

K3NNY · #4 (**permalink**) 07/12/2006, 07:36

Intenté con lo que me sugirieron, pero el problema del "position: relative" es que me deja un espacio vacio en el texto de la derecha, como pueden ver en la "ilustración" a continuación...

Código HTML:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
								Lorem ipsum dolor sit
								amet, consectetuer 
								adipiscing elit.
								Lorem ipsum dolor sit
								amet, consectetuer 
								adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
								Lorem ipsum dolor sit
								amet, consectetuer
								adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

...y eso definitivamente no debería pasar. ¿Se les ocurre alguna otra idea?

PD: Les explico por qué no puedo usar "position: absolute": Si lo uso, y pongo dos blockquotes largos uno a continuación del otro, uno "pisa" al otro, tapando parte del texto. Si saben como evitar eso, son libres de usar "position: absolute", aunque creo que tendríamos el mismo problema que "ilustré" mas arriba.

kahlito · #5 (**permalink**) 07/12/2006, 09:23

Hola de nuevo K3NNY, no entiendo lo del espacio vacio

K3NNY · #6 (**permalink**) 07/12/2006, 10:05

Fijate en el ejemplo que puse, los bloques de texto chiquitos a la derecha representan los "blockquotes", y las tiras de texto a la izquierda son los "p".
Entonces, cuando muevo los blockquotes hacia el costado con position: relative, me queda ese espacio vacio. Yo necesito que quede de esta forma...

Código HTML:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.	Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.	amet, consectetuer 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.	adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.	Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.	amet, consectetuer 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.	adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.	Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.	amet, consectetuer
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.	adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

...se entiende?

fearlex · #7 (**permalink**) 07/12/2006, 10:11

KeNNY realmente en el flujo del documento ellos siguen ocupando un espacio entre cada parrafo, solo estas SACANDOLOS fuera de su lugar pero su espacio va a quedar reservado para ellos. No es mejor hacer un parrafo completo a la izq y los blockquotes a la derecha, sin tener que sacar nada de su lugar. Solo por curiosidad, para que necesitas tal cosa ?????

Suerte anyway

K3NNY · #8 (**permalink**) 07/12/2006, 11:10

fearlex, definitivamente seria mas fácil hacerlo como sugerís, pero me es imposible. Y me es imposible porque ese blockquote lo estaría escribiendo en una entrada de Wordpress (o cualquier otro CMS), por lo que no hay forma de situarlo fuera del post a nivel HTML, por lo que estoy intentando lograrlo con CSS. Pero hasta ahora no logré hacerlo. Lo intenté con floats, con position, con todo, pero no hay caso. Por eso recurro a ustedes, a lo mejor existe alguna solución sencilla que yo no este viendo.

kahlito · #9 (**permalink**) 07/12/2006, 11:25

Hola de nuevo K3NNY intenta con esto:

Código HTML:

<style type="text/css">
/*#contenedor{
width:770px;*/
.blockquote{
position:absolute;
right:10%;
top:180px;
width:150px;
}
.blockquote2{
position:absolute;
right:10%;
top:240px;
width:150px;}
.blockquote3{
position:absolute;
right:10%;
top:380px;
width:150px;
}
.blockquote4{
position:absolute;
right:10%;
top:450px;
width:150px;}
</style>
</head>

<body>
<!--<div id="contenedor"> -->
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<blockquote><p class="blockquote">BBBLorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="blockquote2">BBB2Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<blockquote><p class="blockquote3">BBBLorem ipsum dolor sit amet, consectetuer adipiscing elit.</p><p class="blockquote4">BBBLorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>   
</body>
</html>

Más o menos es algo parecido, luego cambiando las medidas de altura y porcentaje a la derecha puedes adaptarlo a lo tuyo, incluso suponiendo que todo está dentro de un contenedor de 770px o algo así tambien te puede valer

opeth · #10 (**permalink**) 07/12/2006, 11:26

y porque no? float: right; a tu blockquote además colocándole un margen negativo.

Saludos

K3NNY · #11 (**permalink**) 07/12/2006, 12:34

Opeth:
Margenes negativos... pero que pelotudo, como no me dí cuenta antes. Exactamente a eso me refería cuando dije "a lo mejor existe alguna solución sencilla que yo no este viendo.". Funciona a la perfección, porque al ser floats los blockquotes no se pisan entre si. Un googol de gracias no alcanza, sos un groso.

kahlito:
Gracias también a vos por colaborar. Tu ultima sugerencia no me sirve, porque necesito saber de antemano al tamaño de los blockquotes, por lo que no es una solución "dinámica" como necesito que sea, por ser un weblog. Aparte que las posiciones absolutas no me gustan porque son poco "adaptables" al gusto de cada visitante. De todas formas, muchas gracias por el tiempo invertido y la buena predisposición.

PD: Margenes negativos...

K3NNY · #12 (**permalink**) 07/12/2006, 13:08

Cita:

Iniciado por K3NNY

Funciona a la perfección.

Me requetecontra cago en el IE7. Los floats se superponen. Y el bug del "position:relative" para que no desaparezcan sigue existiendo.

fearlex · #13 (**permalink**) 07/12/2006, 13:33

Cita:

Iniciado por K3NNY

Me requetecontra cago en el IE7. Los floats se superponen. Y el bug del "position:relative" para que no desaparezcan sigue existiendo.

Tengo una solucion !!!!!!!!!!!!

Torturemos a Bill Gates para que empiece a hacer el IE8, y le printeamos las especificaciones de estandares, CSS y XHTML, y le decimos que raptaremos a su chihuahua si no los sigue al pie de la letra, y que tiene 2 meses para terminarlo, sino, le sacamos el aire de las gomas a su carro.

%#^%($#&* Creo que estoy buscando la solucion mas facil.......

No te preocupes, ya encontraremos la solucion. Creo que debes modificar la solucion que te dio khalito a ver si logras salir con algo mas "dinamico".

De todos modos suerte

opeth · #14 (**permalink**) 07/12/2006, 16:18

K3NNY como siempre la tiene que cagar IE pero lo más seguro es que la solución sea igual de sencilla. No tengo instalado el IE 7 así que no puedo probar mucho.

Fearlex sería bueno lo que propones pero debe estar ahorita felizmente en su yate jugando Xbox y la soloción ya no sería IE8, ya deberían cambiarle el nombre.

Saludos

AlZuwaga · #15 (**permalink**) 07/12/2006, 17:15

jejeje... discrepo un poco. En su yate puede ser... pero... ¿jugando a la Xbox?
Yo creo que un tipo como Gates tiene cosas muuuuucho más Interesantes que hacer que andar jugando con la xbox ;)

Por cierto (y para que no quede en un O.T.)... le tengo miedito al IE7 con algunos comentarios que vengo leyendo... todavía no lo pruebo (uso win2k) y temo lo que pueda pasar con mis sitios e IE7 :neurótico:

Mikmoro · #16 (**permalink**) 07/12/2006, 18:51

No sé qué problema te produce exactamente IE7, pero si tú lo tienes prueba esto a ver qué pasa:

blockquote { position: relative;
display: inline;
float: right;
clear: right;
width: 300px;
margin-top: 4px;
margin-right: 20%;
}

Mikel.

fearlex · #17 (**permalink**) 07/12/2006, 22:36

Cita:

Iniciado por opeth

No tengo instalado el IE 7 así que no puedo probar mucho.

Cita:

Iniciado por Al Zuwaga

Por cierto (y para que no quede en un O.T.)... le tengo miedito al IE7 con algunos comentarios que vengo leyendo... todavía no lo pruebo (uso win2k) y temo lo que pueda pasar con mis sitios e IE7 :neurótico:

Pues a los dos les cuento algo, el IE7 es muchooooooo mejor que el IE6, incluso el Clear Type Font le da una vida que para que. Aunque aun sigue dando problemas, cosa tipica de Microsoft. Mi opinion personal, deberian instalarlo, ( como secundario, primero Firefox o Opera ) y para las pruebas ya que la inmensa mayoria todavia usa el IE6, hay un programa freeware que se llama Multiple IE que te instala el IE6, IE5.01, IE5.5, IE4.01 y el IE3.01. El que mas me interesa es el IE6, de esta forma puedo probar mis paginas en mi navegador por defecto (FIREFOX) y luego en el IE7 y IE6.

Si voy a tener alguna basura en la maquina, prefiero que sea la mas actualizada, en este caso IE7.

Si desean el link al MUltipleIE me dicen aunque ya todos deben saberselo

Saludos

SiR.CARAJ0DIDA · #18 (**permalink**) 08/12/2006, 08:05

no entiendo cual es tu problema con los blockquote, a mi me funciona perfecto con margen negativo, en ie metele display:inline y position:relative

K3NNY · #19 (**permalink**) 08/12/2006, 12:05

Subí una página boba a un servidor de prueba para que vean mejor mi problema...

http://preview1.awardspace.com/delfuego.com.ar/

...como podrán comprobar los que entren con IE7, aparece un espacio en blanco entre los párrafos 3 y 4, y también entre el 4 y el 5. Pero no hay espacio entre los párrafos 7, 8 y 9, lo que me tiene desconcertado.
Ni en Firefox (2) ni en Opera (9) aparecen esos espacios inútiles.

¿Alguien tiene idea de porque pasa esto y/o como solucionarlo?

fearlex · #20 (**permalink**) 08/12/2006, 15:49

Creo que si hubieras echo subido la pagina desde el principio, ya hubieramos dado con la solucion, coje:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/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>Lorem ipsum</title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
html, body {
font: 14pt Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: #88D52E;
color: #024F00;
}

#entry {
margin: 10px 230px 10px 0px;
padding: 10px;
border: 1px solid white;
background-color: #F0FFF0;
text-align: justify;
}
p{
margin-bottom: 10px;
}

blockquote {
position: relative;
display: inline;
width: 200px;
float: right;
margin: 10px -230px 0 10px;
padding:10px;
border: 1px solid green;
background-color: #06B300;
font-size: 10pt;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Lorem ipsum</h1>
</div>
<div id="content">
<div id="entry">
<h3><a href="<A href="http://www.forosdelweb.com/showthread.php?p=1814268#post1814268">¿Como">http://www.forosdelweb.com/showthread.php?p=1814268#post1814268">¿Como flotar un blockquote fuera del div que lo contiene?</a></h3>
<p>1).
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur
tempor. Curabitur mollis adipiscing nunc. Etiam fringilla bibendum leo.
Vestibulum urna magna, suscipit vel, tincidunt vitae, adipiscing at,
mi. Morbi bibendum eleifend magna. Nullam ultricies nisi sit amet nisi.
Donec dictum magna mattis lorem. Ut fermentum dui condimentum sapien.
Duis commodo mauris vel est. Praesent tempor. Nulla laoreet, mi eget
fermentum adipiscing, libero massa aliquam lectus, id consectetuer
metus tortor a nulla. Quisque feugiat.</p>
<blockquote><p>[...]
augue magna scelerisque metus, non rutrum eros est et nunc. Ut in lacus
id lectus ultricies cursus. Cum sociis natoque penatibus et magnis dis
parturient montes [...]</p></blockquote>
<p>2). Praesent porta.
Aenean eu arcu nec augue porta auctor. Nunc dapibus mauris ultrices
justo lobortis aliquam. Vestibulum est. Cras dolor. Donec euismod,
libero in cursus placerat, lorem pede egestas quam, vitae ultrices
tortor nisl quis est. Quisque sit amet ante sit amet felis dictum
imperdiet. Nulla vel purus at sem hendrerit feugiat. Nullam a nunc.
Pellentesque elementum, nunc nec tempus scelerisque, erat neque tempus
felis, at bibendum nisi ante vitae elit.</p>
<p>3). Sed pharetra
orci eu magna. Ut in erat ac felis semper blandit. Morbi sapien.
Suspendisse tortor. In quis libero. Maecenas at tortor. Quisque aliquam
elit nec mauris. Morbi lorem. Aliquam erat volutpat. Vivamus sit amet
nibh. Duis eget dui in nunc interdum malesuada. In tempus lobortis
lacus.</p>
<blockquote><p>[...] augue magna scelerisque metus,
non rutrum eros est et nunc. Phasellus dolor lorem, aliquet vitae,
scelerisque at, adipiscing nec [...]</p></blockquote>
<p>4). Proin
nisi nibh, consequat quis, posuere quis, mattis a, metus. Fusce
scelerisque ultrices nulla. Maecenas tristique tempus nisi. Nullam
semper. Donec porttitor. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec ut tortor. Ut
consequat tellus quis lacus. Aenean felis nisi, varius sed, dapibus ut,
vulputate vitae, purus. Phasellus dolor lorem, aliquet vitae,
scelerisque at, adipiscing nec, quam.</p>
<blockquote><p>Nam suscipit. Quisque egestas eleifend lacus.</p></blockquote>
<p>5).
Nam suscipit. Quisque egestas eleifend lacus. Ut suscipit ante vitae
nibh blandit hendrerit. Sed feugiat, sem non consectetuer iaculis,
massa mauris sodales nibh, ac euismod lacus dolor ac augue. Maecenas
non leo. Aliquam at libero iaculis ligula suscipit posuere. Morbi non
velit eu elit tristique pretium. Fusce id justo. Morbi sit amet purus
nec nulla molestie lacinia. Etiam eu justo. Cras quis dolor et risus
mattis nonummy. Nulla sem. Morbi porttitor, orci quis gravida mattis,
nunc justo blandit tortor, in sagittis massa ligula nec dui.
Suspendisse orci urna, viverra pulvinar, lobortis eget, egestas non,
augue. Curabitur magna massa, vestibulum non, malesuada at,
sollicitudin tempor, lorem.</p>
<p>6). Duis rutrum nulla eget
ligula. Nullam pharetra tellus in orci. Proin iaculis vestibulum massa.
Proin facilisis enim et augue. Donec id lorem dictum justo sodales
convallis. Suspendisse felis diam, pellentesque id, dapibus nec,
egestas eget, nisi. Etiam dapibus risus ac erat. Duis dui nunc, blandit
tristique, venenatis non, viverra dapibus, dui. Phasellus fermentum
convallis risus. Etiam elit. Nunc convallis arcu nec metus. Nam
ultricies tellus in ante.</p>
<blockquote><p>Nam suscipit. Quisque
egestas eleifend lacus. Morbi non velit eu elit tristique pretium.
Fusce id justo. Morbi sit amet purus nec nulla molestie lacinia. Etiam
eu justo. Cras quis dolor et risus mattis nonummy. </p></blockquote>
<p>7).
Sed pharetra orci eu magna. Ut in erat ac felis semper blandit. Morbi
sapien. Suspendisse tortor. In quis libero. Maecenas at tortor. Quisque
aliquam elit nec mauris. Morbi lorem. Aliquam erat volutpat. Vivamus
sit amet nibh. Duis eget dui in nunc interdum malesuada. In tempus
lobortis lacus.</p>
<p>8). Vivamus eget leo. Pellentesque
scelerisque, purus vel cursus pharetra, orci augue luctus odio, id
malesuada mi felis in urna. Donec tincidunt mauris a diam. Pellentesque
feugiat mauris. Fusce consectetuer pede sit amet lorem. Aenean mollis
fringilla felis. Nam at elit vitae justo pharetra scelerisque. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Praesent ut quam id libero consectetuer lacinia.
Maecenas eu ligula ac nibh suscipit varius. Vestibulum est. Ut lobortis
hendrerit nisl. Quisque neque diam, pulvinar fermentum, suscipit vel,
molestie non, odio. Maecenas euismod nisi vel libero. Ut purus.
Maecenas odio enim, ultrices molestie, pulvinar vitae, rhoncus quis,
felis.</p>
<p>9). Aenean rhoncus sem et tellus. Sed vel tortor.
Duis dictum. Nulla consequat orci ullamcorper nibh venenatis porta.
Suspendisse viverra. Aliquam auctor nibh in tortor. Sed urna. Nunc
facilisis pharetra pede. Integer sit amet erat eget lorem cursus
lobortis. Curabitur sed eros nec nisl imperdiet venenatis. Nulla nec
est. Fusce tempus congue sapien. Sed sed pede. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>

<div class="comment">
<p>Aenean rhoncus sem et tellus. Sed vel tortor. Duis dictum.</p>
</div>
</div>
</div>
</body>
</html>

Probado en IE6, IE7 y Firefox2

Dime que tal ?

Mikmoro · #21 (**permalink**) 08/12/2006, 16:55

Creo que tiene el mismo problema de antes: que los floats del blockquote se superponen unos a otros en IE6
Mikel.

K3NNY · #22 (**permalink**) 08/12/2006, 17:21

Jaja, no vale cambiar el tamaño y unidad de la fuente para que los blockquotes no se toquen. Justamente la idea es que el texto de los blockquotes resalte. Como dijo Mikmoro, y como pueden ver acá...

http://preview1.awardspace.com/delfu...r/fearlex.html

...los blockquotes flotados se pisan los unos a los otros, así que solucionamos un problema pero agregamos otro.

¿Alguna otra idea?

Cita:

Iniciado por fearlex

Creo que si hubieras echo subido la pagina desde el principio, ya hubieramos dado con la solucion [...]

Probablemente, pero recién ayer creé la cuenta en ese hosting para hacer pruebas, por eso no subí la pagina boba antes.

Mikmoro · #23 (**permalink**) 08/12/2006, 18:36

creo que lo tengo. Prueba esto:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Lorem ipsum</title>
  <style>
html, body {
font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: #88D52E;
color: #024F00;
padding: 0;
margin: 0;
}
/* CONTENT */ .entry {
margin: 10px;
padding: 10px;
width: 73%;
border: 1px solid white;
background-color: #F0FFF0;
font-size: 1em;
text-align: justify;
float: left;
clear: both;
}
.entry blockquote {
position: relative;
display: inline;
width: 200px;
float: right;
margin: 10px -230px 0 10px;
clear: right;
padding: 10px;
border: 1px solid green;
background-color: #06B300; font-size: 1.1em;
text-align: center;
}
* html p { margin: 8px;
float: left;
display: inline;
clear: none;
}
.entry p:first-letter {font-weight: bolder;}
.entry blockquote p:first-letter {font-weight: normal}
.comment { clear: both;}
  </style>
</head>
<body>
<div id="header">
<h1>Lorem ipsum</h1>
</div>
<div id="content">
<div class="entry">
<h3><a
 href="http://www.forosdelweb.com/showthread.php?p=1814268#post1814268">&iquest;Como
flotar un blockquote fuera del div que lo contiene?</a></h3>
<p>1). Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Curabitur tempor. Curabitur mollis adipiscing nunc. Etiam fringilla
bibendum leo. Vestibulum urna magna, suscipit vel, tincidunt vitae,
adipiscing at, mi. Morbi bibendum eleifend magna. Nullam ultricies nisi
sit amet nisi. Donec dictum magna mattis lorem. Ut fermentum dui
condimentum sapien. Duis commodo mauris vel est. Praesent tempor. Nulla
laoreet, mi eget fermentum adipiscing, libero massa aliquam lectus, id
consectetuer metus tortor a nulla. Quisque feugiat.</p>
<blockquote>
  <p>[...] augue magna scelerisque metus, non rutrum eros est et
nunc. Ut in lacus id lectus ultricies cursus. Cum sociis natoque
penatibus et magnis dis parturient montes [...]</p>
</blockquote>
<p>2). Praesent porta. Aenean eu arcu nec augue porta auctor.
Nunc dapibus mauris ultrices justo lobortis aliquam. Vestibulum est.
Cras dolor. Donec euismod, libero in cursus placerat, lorem pede
egestas quam, vitae ultrices tortor nisl quis est. Quisque sit amet
ante sit amet felis dictum imperdiet. Nulla vel purus at sem hendrerit
feugiat. Nullam a nunc. Pellentesque elementum, nunc nec tempus
scelerisque, erat neque tempus felis, at bibendum nisi ante vitae elit.</p>
<p>3). Sed pharetra orci eu magna. Ut in erat ac felis semper
blandit. Morbi sapien. Suspendisse tortor. In quis libero. Maecenas at
tortor. Quisque aliquam elit nec mauris. Morbi lorem. Aliquam erat
volutpat. Vivamus sit amet nibh. Duis eget dui in nunc interdum
malesuada. In tempus lobortis lacus.</p>
<blockquote>
  <p>[...] augue magna scelerisque metus, non rutrum eros est et
nunc. Phasellus dolor lorem, aliquet vitae, scelerisque at, adipiscing
nec [...]</p>
</blockquote>
<p>4). Proin nisi nibh, consequat quis, posuere quis, mattis a,
metus. Fusce scelerisque ultrices nulla. Maecenas tristique tempus
nisi. Nullam semper. Donec porttitor. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Donec ut tortor.
Ut consequat tellus quis lacus. Aenean felis nisi, varius sed, dapibus
ut, vulputate vitae, purus. Phasellus dolor lorem, aliquet vitae,
scelerisque at, adipiscing nec, quam.</p>
<blockquote>
  <p>Nam suscipit. Quisque egestas eleifend lacus.</p>
</blockquote>
<p>5). Nam suscipit. Quisque egestas eleifend lacus. Ut suscipit
ante vitae nibh blandit hendrerit. Sed feugiat, sem non consectetuer
iaculis, massa mauris sodales nibh, ac euismod lacus dolor ac augue.
Maecenas non leo. Aliquam at libero iaculis ligula suscipit posuere.
Morbi non velit eu elit tristique pretium. Fusce id justo. Morbi sit
amet purus nec nulla molestie lacinia. Etiam eu justo. Cras quis dolor
et risus mattis nonummy. Nulla sem. Morbi porttitor, orci quis gravida
mattis, nunc justo blandit tortor, in sagittis massa ligula nec dui.
Suspendisse orci urna, viverra pulvinar, lobortis eget, egestas non,
augue. Curabitur magna massa, vestibulum non, malesuada at,
sollicitudin tempor, lorem.</p>
<p>6). Duis rutrum nulla eget ligula. Nullam pharetra tellus in
orci. Proin iaculis vestibulum massa. Proin facilisis enim et augue.
Donec id lorem dictum justo sodales convallis. Suspendisse felis diam,
pellentesque id, dapibus nec, egestas eget, nisi. Etiam dapibus risus
ac erat. Duis dui nunc, blandit tristique, venenatis non, viverra
dapibus, dui. Phasellus fermentum convallis risus. Etiam elit. Nunc
convallis arcu nec metus. Nam ultricies tellus in ante.</p>
<blockquote>
  <p>Nam suscipit. Quisque egestas eleifend lacus. Morbi non
velit eu elit tristique pretium. Fusce id justo. Morbi sit amet purus
nec nulla molestie lacinia. Etiam eu justo. Cras quis dolor et risus
mattis nonummy. </p>
</blockquote>
<p>7). Sed pharetra orci eu magna. Ut in erat ac felis semper
blandit. Morbi sapien. Suspendisse tortor. In quis libero. Maecenas at
tortor. Quisque aliquam elit nec mauris. Morbi lorem. Aliquam erat
volutpat. Vivamus sit amet nibh. Duis eget dui in nunc interdum
malesuada. In tempus lobortis lacus.</p>
<p>8). Vivamus eget leo. Pellentesque scelerisque, purus vel
cursus pharetra, orci augue luctus odio, id malesuada mi felis in urna.
Donec tincidunt mauris a diam. Pellentesque feugiat mauris. Fusce
consectetuer pede sit amet lorem. Aenean mollis fringilla felis. Nam at
elit vitae justo pharetra scelerisque. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Praesent ut
quam id libero consectetuer lacinia. Maecenas eu ligula ac nibh
suscipit varius. Vestibulum est. Ut lobortis hendrerit nisl. Quisque
neque diam, pulvinar fermentum, suscipit vel, molestie non, odio.
Maecenas euismod nisi vel libero. Ut purus. Maecenas odio enim,
ultrices molestie, pulvinar vitae, rhoncus quis, felis.</p>
<p>9). Aenean rhoncus sem et tellus. Sed vel tortor. Duis dictum.
Nulla consequat orci ullamcorper nibh venenatis porta. Suspendisse
viverra. Aliquam auctor nibh in tortor. Sed urna. Nunc facilisis
pharetra pede. Integer sit amet erat eget lorem cursus lobortis.
Curabitur sed eros nec nisl imperdiet venenatis. Nulla nec est. Fusce
tempus congue sapien. Sed sed pede. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
<div class="comment">
<p>Aenean rhoncus sem et tellus. Sed vel tortor. Duis dictum.</p>
</div>
</div>
</body>
</html>

Esto ha sido ya reto personal

Seguro que ahora salen más pegas y hay que ir a por ellas.
Mikel.

Mikmoro · #24 (**permalink**) 08/12/2006, 18:37

creo que lo tengo (para IE6 y firefox, al menos). Prueba esto:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Lorem ipsum</title>
  <style>
html, body {
font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: #88D52E;
color: #024F00;
padding: 0;
margin: 0;
}
/* CONTENT */ .entry {
margin: 10px;
padding: 10px;
width: 73%;
border: 1px solid white;
background-color: #F0FFF0;
font-size: 1em;
text-align: justify;
float: left;
clear: both;
}
.entry blockquote {
position: relative;
display: inline;
width: 200px;
float: right;
margin: 10px -230px 0 10px;
clear: right;
padding: 10px;
border: 1px solid green;
background-color: #06B300; font-size: 1.1em;
text-align: center;
}
* html p { margin: 8px;
float: left;
display: inline;
clear: none;
}
.entry p:first-letter {font-weight: bolder;}
.entry blockquote p:first-letter {font-weight: normal}
.comment { clear: both;}
  </style>
</head>
<body>
<div id="header">
<h1>Lorem ipsum</h1>
</div>
<div id="content">
<div class="entry">
<h3><a
 href="http://www.forosdelweb.com/showthread.php?p=1814268#post1814268">&iquest;Como
flotar un blockquote fuera del div que lo contiene?</a></h3>
<p>1). Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Curabitur tempor. Curabitur mollis adipiscing nunc. Etiam fringilla
bibendum leo. Vestibulum urna magna, suscipit vel, tincidunt vitae,
adipiscing at, mi. Morbi bibendum eleifend magna. Nullam ultricies nisi
sit amet nisi. Donec dictum magna mattis lorem. Ut fermentum dui
condimentum sapien. Duis commodo mauris vel est. Praesent tempor. Nulla
laoreet, mi eget fermentum adipiscing, libero massa aliquam lectus, id
consectetuer metus tortor a nulla. Quisque feugiat.</p>
<blockquote>
  <p>[...] augue magna scelerisque metus, non rutrum eros est et
nunc. Ut in lacus id lectus ultricies cursus. Cum sociis natoque
penatibus et magnis dis parturient montes [...]</p>
</blockquote>
<p>2). Praesent porta. Aenean eu arcu nec augue porta auctor.
Nunc dapibus mauris ultrices justo lobortis aliquam. Vestibulum est.
Cras dolor. Donec euismod, libero in cursus placerat, lorem pede
egestas quam, vitae ultrices tortor nisl quis est. Quisque sit amet
ante sit amet felis dictum imperdiet. Nulla vel purus at sem hendrerit
feugiat. Nullam a nunc. Pellentesque elementum, nunc nec tempus
scelerisque, erat neque tempus felis, at bibendum nisi ante vitae elit.</p>
<p>3). Sed pharetra orci eu magna. Ut in erat ac felis semper
blandit. Morbi sapien. Suspendisse tortor. In quis libero. Maecenas at
tortor. Quisque aliquam elit nec mauris. Morbi lorem. Aliquam erat
volutpat. Vivamus sit amet nibh. Duis eget dui in nunc interdum
malesuada. In tempus lobortis lacus.</p>
<blockquote>
  <p>[...] augue magna scelerisque metus, non rutrum eros est et
nunc. Phasellus dolor lorem, aliquet vitae, scelerisque at, adipiscing
nec [...]</p>
</blockquote>
<p>4). Proin nisi nibh, consequat quis, posuere quis, mattis a,
metus. Fusce scelerisque ultrices nulla. Maecenas tristique tempus
nisi. Nullam semper. Donec porttitor. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Donec ut tortor.
Ut consequat tellus quis lacus. Aenean felis nisi, varius sed, dapibus
ut, vulputate vitae, purus. Phasellus dolor lorem, aliquet vitae,
scelerisque at, adipiscing nec, quam.</p>
<blockquote>
  <p>Nam suscipit. Quisque egestas eleifend lacus.</p>
</blockquote>
<p>5). Nam suscipit. Quisque egestas eleifend lacus. Ut suscipit
ante vitae nibh blandit hendrerit. Sed feugiat, sem non consectetuer
iaculis, massa mauris sodales nibh, ac euismod lacus dolor ac augue.
Maecenas non leo. Aliquam at libero iaculis ligula suscipit posuere.
Morbi non velit eu elit tristique pretium. Fusce id justo. Morbi sit
amet purus nec nulla molestie lacinia. Etiam eu justo. Cras quis dolor
et risus mattis nonummy. Nulla sem. Morbi porttitor, orci quis gravida
mattis, nunc justo blandit tortor, in sagittis massa ligula nec dui.
Suspendisse orci urna, viverra pulvinar, lobortis eget, egestas non,
augue. Curabitur magna massa, vestibulum non, malesuada at,
sollicitudin tempor, lorem.</p>
<p>6). Duis rutrum nulla eget ligula. Nullam pharetra tellus in
orci. Proin iaculis vestibulum massa. Proin facilisis enim et augue.
Donec id lorem dictum justo sodales convallis. Suspendisse felis diam,
pellentesque id, dapibus nec, egestas eget, nisi. Etiam dapibus risus
ac erat. Duis dui nunc, blandit tristique, venenatis non, viverra
dapibus, dui. Phasellus fermentum convallis risus. Etiam elit. Nunc
convallis arcu nec metus. Nam ultricies tellus in ante.</p>
<blockquote>
  <p>Nam suscipit. Quisque egestas eleifend lacus. Morbi non
velit eu elit tristique pretium. Fusce id justo. Morbi sit amet purus
nec nulla molestie lacinia. Etiam eu justo. Cras quis dolor et risus
mattis nonummy. </p>
</blockquote>
<p>7). Sed pharetra orci eu magna. Ut in erat ac felis semper
blandit. Morbi sapien. Suspendisse tortor. In quis libero. Maecenas at
tortor. Quisque aliquam elit nec mauris. Morbi lorem. Aliquam erat
volutpat. Vivamus sit amet nibh. Duis eget dui in nunc interdum
malesuada. In tempus lobortis lacus.</p>
<p>8). Vivamus eget leo. Pellentesque scelerisque, purus vel
cursus pharetra, orci augue luctus odio, id malesuada mi felis in urna.
Donec tincidunt mauris a diam. Pellentesque feugiat mauris. Fusce
consectetuer pede sit amet lorem. Aenean mollis fringilla felis. Nam at
elit vitae justo pharetra scelerisque. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Praesent ut
quam id libero consectetuer lacinia. Maecenas eu ligula ac nibh
suscipit varius. Vestibulum est. Ut lobortis hendrerit nisl. Quisque
neque diam, pulvinar fermentum, suscipit vel, molestie non, odio.
Maecenas euismod nisi vel libero. Ut purus. Maecenas odio enim,
ultrices molestie, pulvinar vitae, rhoncus quis, felis.</p>
<p>9). Aenean rhoncus sem et tellus. Sed vel tortor. Duis dictum.
Nulla consequat orci ullamcorper nibh venenatis porta. Suspendisse
viverra. Aliquam auctor nibh in tortor. Sed urna. Nunc facilisis
pharetra pede. Integer sit amet erat eget lorem cursus lobortis.
Curabitur sed eros nec nisl imperdiet venenatis. Nulla nec est. Fusce
tempus congue sapien. Sed sed pede. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
<div class="comment">
<p>Aenean rhoncus sem et tellus. Sed vel tortor. Duis dictum.</p>
</div>
</div>
</body>
</html>

Esto ha sido ya reto personal

Seguro que ahora salen más pegas y hay que ir a por ellas.
Mikel.

K3NNY · #25 (**permalink**) 08/12/2006, 22:48

Cita:

Iniciado por Mikmoro

creo que lo tengo (para IE6 y firefox, al menos).

Efectivamente, en IE6 funciona a la perfección, pero en IE7 me sigue corriendo los párrafos 4 y 5 hacia abajo, dejando un espacio en blanco...

http://preview1.awardspace.com/delfu...r/mikmoro.html

...ya vencimos al viejo (IE6), ahora solo falta encontrarle la vuelta al nuevo (IE7).

Mikmoro · #26 (**permalink**) 09/12/2006, 06:48

Vaya, vaya. Eso no lo puedo mirar porque no tengo IE7.
¿Así que el maldito explorer, además de no haber resuelto sus problemas con el standard W3C de CSS, ha eliminado la posibilidad de usar el hack del asterisco (* html)?

Pues vaya gracia. ¿Y qué lo hacen, para joder a los programadores web? No entiendo nada.

Mikel.

Mikmoro · #27 (**permalink**) 09/12/2006, 09:35

Bueno, aunque como ya he dicho no lo puedo comprobar, según he leído, en MS han eliminado realmente el bug del posicionamiento. Vamos a ver si es cierto. Si puedes coloca esto en el head:



Y elimina el hack de antes:

* html p { margin: 8px;
float: left;
display: inline;
clear: none;
}

En firefox y IE6 sigue funcionando bien. Si han cumplido su palabra, debería también funcionar en IE7.
Ya me contarás.

Mikel.

K3NNY · #28 (**permalink**) 10/12/2006, 23:07

Aparentemente funciona, tanto en Ie6 como en Ie7, pero sin especificar la version del Ie en el comentario condicional...

<!--[if IE]>

...pero no puedo estar seguro, porque yo instalé el Ie7 a través del Windows Update y después instale una versión standalone del Ie6 para hacer pruebas. Pero resulta que, según leo en Quirksmore.org (y puedo comprobarlo gracias al ejemplo ahí descrito) mi Ie6 piensa que es un Ie7, por lo que si el comentario condicional fuera "if IE 6" no lo interpretaría. Entonces...

¿Podría alguien, por favor, que aún tenga el Ie6 instalado de fabrica, confirmarme que funciona bien?

http://preview1.awardspace.com/delfu...r/mikmoro.html

...desde ya, muchísimas gracias a todos los que colaboraron. Mientras tanto, voy a buscar la forma de instalar un Ie6 que siga pensando que es un Ie6, porque veo un futuro de muuuchos comentarios condicionales en mis proyectos.

Mikmoro · #29 (**permalink**) 11/12/2006, 00:56

Sí, si, yo tengo el 6 porque no quise instalar el 7, y funciona perfectamente. Si tú dices que en el 7 también funciona tal y como está, ya lo hemos resuelto, y además ya tenemos un dato para el 7 de ahora en adelante.

Hasta la vista.
Mikel.