Im having a CSS problem. I want the paragraph under the image to be an image caption. So it should be under the image. Am i explaining it correctly? What am i doing wrong? (You can copy the code down here and just watch it in a browser)
<!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>Untitled Page</title>
<style type="text/css">
.CaptionRight
{
float: right;
vertical-align: top;
margin-left: 1em;
margin-bottom: 1em;
display:block;
border: 1px red solid;
}
.CaptionRight p
{
}
body
{
width: 500px;
}
</style>
</head>
<body>
<p><span class="CaptionRight" style="width:300px;"><img src="http://www.dn.se/ImageHandler.axd/?id=1034780&imageFormat=original" alt="" />
<p>
-This should be the image caption right under the image.
</p></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc lobortis at lacus in auctor. Phasellus urna ligula,
accumsan ut nisl pharetra, porta egestas ligula.
Integer ultrices dolor neque, dapibus cursus lorem
volutpat sit amet. Aliquam volutpat tempus dapibus.
Vestibulum blandit, quam sit amet lacinia laoreet,
dui massa dictum turpis, sed mattis purus lorem non diam.
Pellentesque imperdiet massa libero, et ultrices tellus tincidunt eu.
Vivamus urna magna, congue nec imperdiet nec, eleifend vitae elit.
Donec iaculis lorem elementum orci tempus rutrum.
Donec vel tortor iaculis lacus lacinia tempus sed vel est.
Suspendisse iaculis vestibulum tincidunt. Quisque varius
sapien porttitor malesuada volutpat. Sed a sapien nisl.
</p>
</body>
</html>
You cannot have <p></p> tags inside another
<!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>Untitled Page</title>
<style type="text/css">
.CaptionRight{
float: right;
vertical-align: top;
margin-left: 1em;
margin-bottom: 1em;
display:block;
border: 1px red solid;
}
Body{
width: 500px;
}
</style>
</head>
<body>
<span class="CaptionRight" style="width:300px;"><img src="http://www.dn.se/ImageHandler.axd/?id=1034780&imageFormat=original" alt="" /><p>-This should be the image caption right under the image.</p></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis at lacus in auctor. Phasellus urna ligula, accumsan ut nisl pharetra, porta egestas ligula. Integer ultrices dolor neque, dapibus cursus lorem volutpat sit amet. Aliquam volutpat tempus dapibus. Vestibulum blandit, quam sit amet lacinia laoreet, dui massa dictum turpis, sed mattis purus lorem non diam. Pellentesque imperdiet massa libero, et ultrices tellus tincidunt eu. Vivamus urna magna, congue nec imperdiet nec, eleifend vitae elit. Donec iaculis lorem elementum orci tempus rutrum. Donec vel tortor iaculis lacus lacinia tempus sed vel est. Suspendisse iaculis vestibulum tincidunt. Quisque varius sapien porttitor malesuada volutpat. Sed a sapien nisl.
Etiam ultricies tincidunt sagittis. Cras tortor turpis, blandit eu tincidunt eu, malesuada sit amet nisl. In ullamcorper tellus est, et volutpat dui pretium id. Nullam a dolor orci. Vivamus volutpat nisl vel eros feugiat, sit amet elementum est eleifend. Phasellus lorem sem, adipiscing eu lacus consequat, hendrerit feugiat risus. Donec non adipiscing felis. Suspendisse potenti. Mauris tempus id magna at euismod. Quisque non justo eu nulla consequat feugiat sed vel diam. Nulla nec tortor rhoncus, tincidunt elit et, sagittis libero. Phasellus sed nibh et arcu elementum lacinia sit amet nec dolor. Phasellus dictum pulvinar erat vel auctor. Fusce nibh massa, molestie et elit fermentum, fringilla aliquam tellus. Donec pulvinar auctor risus, id auctor nisi pellentesque pellentesque.
Ut ut auctor metus. Curabitur sit amet dictum nunc. Aliquam dignissim erat ac nisl pellentesque, at pellentesque nisi auctor. Ut dapibus iaculis volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas hendrerit ipsum ut dolor commodo feugiat. Praesent eu purus eu ipsum pharetra commodo at at odio. Maecenas elementum urna vitae congue scelerisque. Donec vel laoreet lectus, ut laoreet odio. Nam ut accumsan quam, adipiscing tincidunt libero. Aenean quis felis libero.<br /></p>
</body>
</html>
Just remove the P from the HTML.
<!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>Untitled Page</title>
<style type="text/css">
.CaptionRight
{
float: right;
vertical-align: top;
margin-left: 1em;
margin-bottom: 1em;
display:block;
border: 1px red solid;
}
body
{
width: 500px;
}
</style>
</head>
<body>
<p><span class="CaptionRight" style="width:300px;"><img src="http://www.dn.se/ImageHandler.axd/?id=1034780&imageFormat=original" alt="" />This should be the image caption right under the image.</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc lobortis at lacus in auctor. Phasellus urna ligula,
accumsan ut nisl pharetra, porta egestas ligula.
Integer ultrices dolor neque, dapibus cursus lorem
volutpat sit amet. Aliquam volutpat tempus dapibus.
Vestibulum blandit, quam sit amet lacinia laoreet,
dui massa dictum turpis, sed mattis purus lorem non diam.
Pellentesque imperdiet massa libero, et ultrices tellus tincidunt eu.
Vivamus urna magna, congue nec imperdiet nec, eleifend vitae elit.
Donec iaculis lorem elementum orci tempus rutrum.
Donec vel tortor iaculis lacus lacinia tempus sed vel est.
Suspendisse iaculis vestibulum tincidunt. Quisque varius
sapien porttitor malesuada volutpat. Sed a sapien nisl.
</p>
</body>
</html>
HTML5:
<!DOCTYPE html>
...
<figure>
<img src="#" alt="image">
<figcaption>My caption</figcaption>
</figure>
Fiddle
In this way?
Related
I'd like to get non-scrolling background div on page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="back"/>
<div class="front">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus turpis tortor, semper id suscipit vel, bibendum eu magna. Nullam a libero nisi. Fusce eget elementum augue. Ut tellus leo, dignissim varius finibus a, aliquet ut turpis. Proin non elit luctus, maximus nunc ac, auctor elit. Nullam erat ante, faucibus ac viverra eget, finibus nec ipsum. Vivamus sit amet purus accumsan justo finibus rutrum eu nec nunc.</p>
<p>Suspendisse eros lorem, luctus vitae volutpat ultricies, egestas et risus. Morbi fermentum iaculis nunc, ac tincidunt elit tristique sed. Aenean efficitur velit elit, vitae efficitur ex lobortis non. Etiam in orci ut libero lobortis laoreet. Suspendisse efficitur et sem non bibendum. Nam iaculis, mi in pharetra auctor, diam tellus commodo eros, eget volutpat ipsum enim vitae justo. Sed non ullamcorper odio, ac euismod ligula. Proin euismod eleifend convallis. Vivamus maximus accumsan dignissim. Morbi interdum magna sit amet tempor lacinia. Vivamus nec mi ligula. Donec tortor ex, commodo a est sit amet, volutpat gravida risus. Mauris vitae malesuada est. Curabitur blandit posuere ligula sit amet feugiat. Sed est tellus, cursus eget laoreet et, imperdiet eget dui. Donec facilisis, leo at mollis maximus, sapien purus lacinia mauris, ut fringilla turpis nibh finibus nunc.</p>
<p>Maecenas eget lorem posuere, tincidunt massa sit amet, vehicula diam. Nunc vel consequat nulla. Etiam volutpat volutpat fringilla. Suspendisse potenti. In mattis ex non ex iaculis, eu gravida nulla ultrices. Curabitur ut sem purus. Donec quis tempor lorem, faucibus condimentum eros. Donec massa dui, euismod non tincidunt sed, tempor id nisl. Pellentesque varius mollis nibh.</p>
</div>
<script src="script.js"></script>
</body>
</html>
My style.css looks like:
.back {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: lightblue;
}
.front {
position: relative;
}
What I expect - my long text scrolled over lightblue background (first div).
Whit I've seen - scrolling locked, I see just on-screen portion of long-text. So, div.back seems to be at top of z-index stack, when I expect opposite.
Why it's happen?
Thanks to #Alohci:
<div class="back"/> is invalid.
Correct is <div class="back"></div>
When you resize the window the text get resized but what i want to happen it up to a certain point i want the text to get push below the image instead of it being squished.
This is what i have right now
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<p>In this example, the image will float to the left in the paragraph, and the text in the paragraph will wrap around the image.</p>
<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-right:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
#media screen and (max-width:600px){
p {
display:flex;
flex-direction:column;
align-items:center;
}
p img {
margin:10px;
}
}
</style>
</head>
<body>
<p>In this example, the image will float to the left in the paragraph, and the text in the paragraph will wrap around the image.</p>
<p><img src="https://picsum.photos/300/300" alt="Pineapple" style="width:170px;height:170px;margin-right:15px;">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</span></p>
</body>
</html>
I have some A4 sized divs with different amount of content. I try to place footers in each page with page numbers. Footer should be fixed on the bottom of the page.
.page {
border:1px solid;
width: 210mm;
height: 297mm;
margin: 10px;
padding: 20px
}
.footer {
position: absolute;
bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet diam sit amet magna dapibus, a mollis nisi tempus. Etiam hendrerit nec dolor ac euismod. Aenean dignissim eget massa congue vestibulum. Duis volutpat semper dictum. Mauris ut magna ultricies, sagittis urna pretium, convallis est. Curabitur nisl turpis, vehicula vel luctus eu, laoreet ac neque. In congue in nulla vitae luctus. Proin quis felis consectetur, sodales elit vitae, laoreet quam.</p>
<p>Cras pharetra, metus blandit dignissim mollis, libero erat ultrices augue, porttitor finibus velit lacus eu elit. Sed sit amet nulla gravida, interdum erat iaculis, congue sapien. Donec id magna eget sem tincidunt vulputate in vitae tortor. Proin malesuada ut leo et pharetra. Cras enim lacus, pellentesque quis mauris eget, fringilla venenatis risus. Proin varius dui eget rhoncus auctor. Praesent non egestas lorem, eget placerat nunc. Maecenas aliquet orci turpis, quis elementum sem laoreet id. Praesent metus leo, laoreet sed mollis ut, feugiat ut arcu. Vestibulum tempus elit eu neque maximus, eu vulputate leo ullamcorper. Nam commodo sem risus, vitae viverra felis lobortis a. Nulla ac leo nisl. Sed nec lobortis lacus.</p>
<div class="footer">FOOTER page 1/2</div>
</div>
<div class="page"><p>Praesent non justo vitae neque viverra malesuada. Mauris sagittis venenatis diam, sed aliquet nisl sollicitudin id. Suspendisse potenti. Nullam et ornare orci. Nunc eleifend pulvinar leo, vitae viverra lorem. Nunc hendrerit pellentesque consectetur. Vivamus lectus urna, iaculis vel lectus eu, tempus laoreet quam. Integer commodo tincidunt nunc vitae hendrerit. Mauris eget ex ipsum. Mauris pellentesque iaculis metus, vel convallis tellus rutrum sit amet. Pellentesque pretium faucibus justo ut hendrerit. Phasellus vehicula blandit efficitur.</p>
<div class="footer">FOOTER page 2/2</div>
</div>
</body>
</html>
Here is a JsBin too, to play with.
When you're using position: absolute you have to correctly identify containing block:
If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky) (from MDN).
In your case there's no containing block with position value other than static - so .footer elements position themselves relative to root html element.
Set position: relative on .page and everything will work:
.page {
border:1px solid;
width: 210mm;
height: 297mm;
margin: 10px;
padding: 20px;
position: relative;
}
.footer {
position: absolute;
bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet diam sit amet magna dapibus, a mollis nisi tempus. Etiam hendrerit nec dolor ac euismod. Aenean dignissim eget massa congue vestibulum. Duis volutpat semper dictum. Mauris ut magna ultricies, sagittis urna pretium, convallis est. Curabitur nisl turpis, vehicula vel luctus eu, laoreet ac neque. In congue in nulla vitae luctus. Proin quis felis consectetur, sodales elit vitae, laoreet quam.</p>
<p>Cras pharetra, metus blandit dignissim mollis, libero erat ultrices augue, porttitor finibus velit lacus eu elit. Sed sit amet nulla gravida, interdum erat iaculis, congue sapien. Donec id magna eget sem tincidunt vulputate in vitae tortor. Proin malesuada ut leo et pharetra. Cras enim lacus, pellentesque quis mauris eget, fringilla venenatis risus. Proin varius dui eget rhoncus auctor. Praesent non egestas lorem, eget placerat nunc. Maecenas aliquet orci turpis, quis elementum sem laoreet id. Praesent metus leo, laoreet sed mollis ut, feugiat ut arcu. Vestibulum tempus elit eu neque maximus, eu vulputate leo ullamcorper. Nam commodo sem risus, vitae viverra felis lobortis a. Nulla ac leo nisl. Sed nec lobortis lacus.</p>
<div class="footer">FOOTER page 1/2</div>
</div>
<div class="page"><p>Praesent non justo vitae neque viverra malesuada. Mauris sagittis venenatis diam, sed aliquet nisl sollicitudin id. Suspendisse potenti. Nullam et ornare orci. Nunc eleifend pulvinar leo, vitae viverra lorem. Nunc hendrerit pellentesque consectetur. Vivamus lectus urna, iaculis vel lectus eu, tempus laoreet quam. Integer commodo tincidunt nunc vitae hendrerit. Mauris eget ex ipsum. Mauris pellentesque iaculis metus, vel convallis tellus rutrum sit amet. Pellentesque pretium faucibus justo ut hendrerit. Phasellus vehicula blandit efficitur.</p>
<div class="footer">FOOTER page 2/2</div>
</div>
</body>
</html>
As #fen1x said, you have to set the position of parent div to relative. Just add this CSS rule.
.page{
position: relative;
}
Hey. I have the following markup:
<!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></title>
<style type="text/css">
*
{
padding: 0;
margin: 0;
}
#container
{
padding-left: 200px;
padding-right: 10px;
overflow: hidden;
}
.column
{
float: left;
position: relative;
text-align: justify;
margin-bottom: -2000px;
padding-bottom: 2005px;
}
#top
{
background-color: Red;
height: 30px;
}
#content
{
background-color: Green;
width: 100%;
padding: 0 5px;
}
#left
{
background-color: Blue;
width: 200px;
right: 210px;
margin-top: -30px;
margin-left: -100%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
Lorem ipsum blah blah blah
</div>
<div id="content" class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio eros, porta eu rutrum sed, vestibulum nec nisl. Nulla facilisi. Nunc viverra, ante eget lobortis fermentum, mauris est rhoncus nisl, nec ullamcorper risus ligula a sem. Donec a lorem sit amet nunc pharetra rhoncus. Aenean rutrum tincidunt dui nec dapibus. Nullam posuere semper quam, sed eleifend enim pulvinar a. Praesent mattis dui id nisl placerat dignissim. Mauris hendrerit ultricies justo, laoreet luctus turpis consequat ac. Suspendisse potenti. Ut in ipsum ligula. Phasellus sagittis metus ac libero varius vel pulvinar tortor scelerisque. Donec cursus augue ut arcu porta viverra. Quisque tempus aliquam erat sed viverra. Suspendisse sem odio, ornare sit amet sodales id, vulputate non erat. Aenean viverra tempus turpis commodo dictum. Nulla eleifend risus egestas justo vestibulum in volutpat orci lacinia. Proin sapien neque, lobortis eget cursus quis, venenatis vitae nisl. Suspendisse at neque eu mauris lobortis eleifend. Etiam suscipit sapien nec orci tincidunt at hendrerit nisl tempus.
</div>
<div id="left" class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio eros, porta eu rutrum sed, vestibulum nec nisl. Nulla facilisi. Nunc viverra, ante eget lobortis fermentum, mauris est rhoncus nisl, nec ullamcorper risus ligula a sem. Donec a lorem sit amet nunc pharetra rhoncus. Aenean rutrum tincidunt dui nec dapibus. Nullam posuere semper quam, sed eleifend enim pulvinar a. Praesent mattis dui id nisl placerat dignissim. Mauris hendrerit ultricies justo, laoreet luctus turpis consequat ac. Suspendisse potenti. Ut in ipsum ligula. Phasellus sagittis metus ac libero varius vel pulvinar tortor scelerisque. Donec cursus augue ut arcu porta viverra. Quisque tempus aliquam erat sed viverra. Suspendisse sem odio, ornare sit amet sodales id, vulputate non erat. Aenean viverra tempus turpis commodo dictum. Nulla eleifend risus egestas justo vestibulum in volutpat orci lacinia. Proin sapien neque, lobortis eget cursus quis, venenatis vitae nisl. Suspendisse at neque eu mauris lobortis eleifend. Etiam suscipit sapien nec orci tincidunt at hendrerit nisl tempus.
</div>
</div>
</body>
</html>
The problem is, that the left column doesn't show up. However, if I remove the padding from #content (and subtract 10 from #left's right value), it works, except for the missing padding on #content. Is there any way to fix this without any extra markup? I've seen this solution:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
But I would like to keep the amount of wrappers to a minimum... :)
This site might help you:
http://www.cssplay.co.uk/layouts/threecol.html
His entire site is worth a look for CSS ideas you have never thought of before.
I think he will even do the work for 50 Euro an hour. I have hired him in the past, he was fast.
I think your link is more of an explanation of this one:
http://www.positioniseverything.net/articles/onetruelayout/equalheight
Although this one has more in depth discussion on the caveats and problems concerning the 3 equal height columns.
Help, please.
The code - just a styled pre and a styled div (using float and clear) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ie bug</title>
<style type="text/css">
<!--
pre {
background-color: #FFFFCC;
border: 2px dashed #FF6666;
padding-top: 7px;
padding-bottom: 8px;
padding-left: 10px;
margin: 10px;
float: left;
padding-right: 10px;
clear: both;
}
div {
float: left;
clear: both;
}
-->
</style>
</head>
<body bgcolor="#D6D6D6">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus viverra interdum. Etiam ut ornare nulla. Praesent gravida blandit aliquam. Nulla facilisi. Suspendisse vel augue ligula. In interdum, purus et pellentesque tempus, urna tortor malesuada massa.
<h3>Description</h3>
Mauris quis est erat, a tempus dolor. Duis faucibus ultricies volutpat. Aliquam erat volutpat. Nulla et consectetur est. Sed eleifend ante ac tellus feugiat sed scelerisque nisi vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Nunc eget velit vel metus feugiat facilisis. Donec vel risus augue, ut mattis sem. Proin elementum libero ut lectus adipiscing semper. Proin et nibh enim.
<h3>Code</h3>
Phasellus sodales risus a lectus gravida tincidunt. Nulla sit amet enim ante, vel semper felis. Nullam enim mi, feugiat et porttitor tempus, auctor sed velit. Vivamus ac metus neque, in feugiat velit. Nam vitae dignissim eros. Praesent eros risus, pellentesque rutrum molestie sit amet, volutpat a mauris. Quisque ipsum turpis, placerat gravida aliquam et, placerat at leo.
</div>
<pre><em><Firefox bug : the right margin is 0 px instead of 10 px></em>
Vivamus eu mi nulla. Cras ac neque in ante aliquet ultricies eget id risus. Curabitur ut massa metus. Etiam dapibus fringilla diam, id lacinia tortor blandit eu. Nunc commodo commodo dui, eget malesuada purus cursus tempor. Quisque felis tellus, vulputate vitae ullamcorper sit amet, suscipit non augue. Integer vitae condimentum ante. Donec eu nisl magna. Nam ipsum lectus, dapibus a volutpat nec, rutrum sit amet eros. Phasellus velit est, adipiscing a interdum at, commodo id elit.
</pre>
<div>
<h3>Ie6 bug</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies, erat in varius ornare, diam mi semper nisi, eu sagittis mi diam at nisl. Aenean euismod nisl in enim interdum gravida. Maecenas congue, neque non imperdiet dictum, eros arcu ultricies mauris, et rhoncus ligula tortor nec nibh et convallis nulla tempus vel. Morbi ac leo magna, vitae semper felis. Donec tincidunt nunc quis lacus aliquet tempor. Nulla facilisi.
</div>
</body></html>
Firefox won't display the margin in the pre tag (yellow box in image) :
on the other hand ie6 displays the last div as shown :
Changing :
div {
float: left;
clear: both;
}
to :
div {
clear: both;
}
solved the ie6 bug. Still no margin in ff though.
EDIT 2013.12.24: well it was a bug fixed at some point - now FF works. Needless to add that IE still has the same bug.