Foros del Web - Ver Mensaje Individual - ¿Como flotar un blockquote fuera del div que lo contiene?

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.