I have a div with a top border and bottom border contained in which is an image (floated left) and some text (floated right). Under this element (in Opera and IE) is some more text positioned from the right. When I view this in mozilla the borders (as opposed to being one above the image and 1st lot of text and 1 below them) are both together ABOVE the image and text, and the 2nd lot of text is corectly positioned with respect to the borders, but not with respect to the 1st lot of text. I've checked the css using W3C and its standards compliant, can anyone help?
IxxIAfter float use clear
The text element after the <div> will probably need clear:both;The clear command is supposed to clear the top of the floated element, with the bottom of the element to be cleared. But how do you position them on the same level? How do you force them to be on the same level?Take a look at this.
#container {
padding: 5px;
width: 500px;
border: 1px solid #000;
}
#left {
float: left;
}
#right {
float: right;
}
#center {
text-align: center;
clear: both;
}
<div id="container">
<p id="left">This text is floated left.</p>
<p id="right">This text is floated right.</p>
<p id="center">This text is below the floated elements, with <code>clear: both;</code> applied.</p>
</div>
You may also find this article (<!-- m --><a class="postlink" href="http://www.complexspiral.com/publications/containing-floats/">http://www.complexspiral.com/publicatio ... ng-floats/</a><!-- m -->) enlightening.
IxxIAfter float use clear
The text element after the <div> will probably need clear:both;The clear command is supposed to clear the top of the floated element, with the bottom of the element to be cleared. But how do you position them on the same level? How do you force them to be on the same level?Take a look at this.
#container {
padding: 5px;
width: 500px;
border: 1px solid #000;
}
#left {
float: left;
}
#right {
float: right;
}
#center {
text-align: center;
clear: both;
}
<div id="container">
<p id="left">This text is floated left.</p>
<p id="right">This text is floated right.</p>
<p id="center">This text is below the floated elements, with <code>clear: both;</code> applied.</p>
</div>
You may also find this article (<!-- m --><a class="postlink" href="http://www.complexspiral.com/publications/containing-floats/">http://www.complexspiral.com/publicatio ... ng-floats/</a><!-- m -->) enlightening.