Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<!-- fixed width is the only thing that seems to work -->
<div style="float:left; border:1px solid red;">
<p style="float:right;margin:0;padding:0;">whatever floats your boat</p><br style="clear:both;" /></div>
<div style="float:right; border:1px solid aqua">
<p style="margin:0;padding:0;">is fine by me</p></div>
</body>
</html>
you code is slightly wrong on possibly two levels, although if you correct one bit the other will fix itself for now too
just take a look at your first div.. you are floating that left, (without a width) which is perfectly fine, but then inside that div you are placing another block level element, a <p>, which you are then floating right?
That <p> is going go to go to the right hand side of the page.. it, the <p>, will have no width but the <div> containing it will get a 100% width as per the shrink-wrap thinking it doesn't know it's got a "shrinkwrapped" element that is inside it, so it defaults to 100%
IMHO you simply need to remove the extra float right from the left floating content and it should work fine..
PS: the second level is the "clear"
a clearer element should come after both the floats, although in this case (though not extensively tested x-browser), it seem to be working? maybe I've got brain drain but (at first glance) I'd say that's a problem waiting to happen.. it doesn't appear to me to be necessary. If you want them, the two floats, on the same line, why are you clearing the first float? - anyway like I say, it's probably brain drain or misinterpretation on my behalf :)
let us know
[edited by: SuzyUK at 8:39 pm (utc) on Sep. 16, 2008]
The reason I am floating the nested paragraph right is because this is for an Arabic interface where the text will read from right to left. I'm guessing there is no way around what I am trying to do unless I declare a width on at least the left floated div.
Thanks.
