Avatar for Username

Támogatás keresése

Kerülje el a támogatási csalásokat. Sosem kérjük arra, hogy hívjon fel egy telefonszámot vagy osszon meg személyes információkat. Jelentse a gyanús tevékenységeket a „Visszaélés bejelentése” lehetőséggel.

További tudnivalók

A témacsoportot lezárták és archiválták. Tegyen fel új kérdést, ha segítségre van szüksége.

Why is a floating box outside its container?

  • 5 válasz
  • 1 embernek van ilyen problémája
  • 4 megtekintés
  • Utolsó üzenet ettől: cor-el

žełvik
žełvik
more options

This code: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
><TITLE ></TITLE >
<BLOCKQUOTE STYLE="BACKGROUND: YELLOW; HEIGHT: 10EX" ><P STYLE="FLOAT: RIGHT" >Lorem<HR ><P STYLE="FLOAT: RIGHT" >ipsum</BLOCKQUOTE >
  • Why is BLOCKQUOTE wider than HR?
  • Why is ‘Lorem’ aligned with the widened BLOCKQUOTE?
  • Why is ‘ipsum‘ not aligned likewise?
This code: <pre><nowiki> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ><TITLE ></TITLE > <BLOCKQUOTE STYLE="BACKGROUND: YELLOW; HEIGHT: 10EX" ><P STYLE="FLOAT: RIGHT" >Lorem<HR ><P STYLE="FLOAT: RIGHT" >ipsum</BLOCKQUOTE ></nowiki></pre> * Why is BLOCKQUOTE wider than HR? * Why is ‘Lorem’ aligned with the widened BLOCKQUOTE? * Why is ‘ipsum‘ not aligned likewise?

Módosította: cor-el,

Kiválasztott megoldás

To achieve what you want, you have to add some clearing DIV elements or CSS rules. 


data:text/html;charset=utf-8,
<!doctype html public "-//w3c//dtd html 4.01//en">
<head> 
 <title></title>
</head> 
<body>
<blockquote style="background: yellow;" >
 <p style="float: right;" >Lorem</p>
 <hr style="clear: both;" >
 <p style="float: right;" >ipsum</p>
 <div style="clear: both;"></div>
</blockquote>
</body>
Válasz olvasása eredeti szövegkörnyezetben 👍 0

Összes válasz (5)

žełvik
žełvik Kérdés tulajdonosa
more options

Well, not quite the code I intended…

Maybe this will work: 

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
>< TITLE >< /TITLE >
< BLOCKQUOTE STYLE="BACKGROUND: YELLOW; HEIGHT: 10EX" >< P STYLE="FLOAT: RIGHT" >Lorem< HR >< P STYLE="FLOAT: RIGHT" >ipsum< /BLOCKQUOTE >

Módosította: cor-el,

žełvik
žełvik Kérdés tulajdonosa
more options

Or this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ><TITLE ></TITLE > <BLOCKQUOTE STYLE="BACKGROUND: YELLOW; HEIGHT: 10EX" ><P STYLE="FLOAT: RIGHT" >Lorem<HR ><P STYLE="FLOAT: RIGHT" >ipsum</BLOCKQUOTE >

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Kiválasztott megoldás

To achieve what you want, you have to add some clearing DIV elements or CSS rules. 


data:text/html;charset=utf-8,
<!doctype html public "-//w3c//dtd html 4.01//en">
<head> 
 <title></title>
</head> 
<body>
<blockquote style="background: yellow;" >
 <p style="float: right;" >Lorem</p>
 <hr style="clear: both;" >
 <p style="float: right;" >ipsum</p>
 <div style="clear: both;"></div>
</blockquote>
</body>

Módosította: cor-el,

žełvik
žełvik Kérdés tulajdonosa
more options

What is ‘!doctype’?

I think that:

  • the rule is being shortened by ‘Lorem’ because its margin overlaps it,
  • ‘ipsum’ is lower than ’Lorem’ because of the margin under the rule,
  • ‘ipsum’ is to the left of ‘Lorem’ because the margin under the rule is too narrow.

Correct me if I am wrong. I have probably missed two important points:

  • a float can shorten a rule,
  • margins around a float do not collapse.

Thank you,

Chris

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Floats within a container do not make that container adjust its width and height to fit the floats unless you use a clear rule.
So in your case the P elements float, but the HR element doesn't and is rendered first (your code looks the same in Google Chrome as in Firefox).

If you need a more precise explanation about how floats work then it is best to ask advice at the MozillaZine "Web Development/Standards Evangelism" forum.

The helpers at that forum are more knowledgeable about web development issues.
You need to register at the MozillaZine forum site in order to post at that forum.