Simon: Nach float im DIV nur noch rahmen oben.

Hi,
ich hab da ein kleines Problem:

<div>
<ul>....</ul>
<ul>....</ul>
</div>

Ich hab dem Div einen Rahmen mit CSS zugewiesen, was auch ganz normal funktioniert, aber sobald ich z.B. bei einer Liste float einsetze ist der Rahmen um das Div weg und man sieht nur noch oben einen Rahmen.

Ist wahrscheinlich ein ganz simples Problem nur versteh ich grad nicht warum.

MfG
Simon

  1. Grüße,
    vermutlich ist es simpel ja, und wenn du mir sagst, welche Farbe meine Socken gerade haben, sage ich dir, wo dein Problem liegt.
    MFG
    bleicher

    --
    __________________________-

    FirefoxMyth
    1. vermutlich ist es simpel ja, und wenn du mir sagst, welche Farbe meine Socken gerade haben, sage ich dir, wo dein Problem liegt.

      Schwarz???

      Was ich meinte sieht man hier recht gut:

      <!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" xml:lang="de" lang="de">  
      <head>  
      <title></title>  
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
      <style type="text/css">  
      #box {  
        border: 1px solid red;  
      }  
      #ul {  
        float: left;  
      }  
      </style>  
      <body>  
      <div id="box">  
      <ul>  
      <li>Text1</li>  
      <li>Text1</li>  
      <li>Text1</li>  
      <li>Text1</li>  
      </ul>  
      <ul id="ul">  
      <li>Text2</li>  
      <li>Text2</li>  
      <li>Text2</li>  
      <li>Text2</li>  
      </ul>  
      </div>  
      </body>  
      </html>
      

      Wieso ist die 2 Liste nicht mehr im Rahmen?

      MfG
      Simon

      1. Sry, hab </head> vergessen.

        1. Sry, hab </head> vergessen.

          Die Liste ist nicht mehr im regulären Textfluss, darum wirkt sie sich nicht wie gewohnt auf die höhe des Elternelements aus. Du musst also am Ende des umgebenden Elements den Textfluss wiederherstellen.

          Eine vernünftige Lösung wird z.B. hier gezeigt:
          <http://www.positioniseverything.net/easyclearing.html >

          1. Eine vernünftige Lösung wird z.B. hier gezeigt:
            <http://www.positioniseverything.net/easyclearing.html >

            Perfekt, danke.

          2. @@suit:

            nuqneH

            Eine vernünftige Lösung wird z.B. hier gezeigt:
            http://www.positioniseverything.net/easyclearing.html

            Eine weitaus einfachere Lösung sieht so aus:

            #box { overflow: hidden }

            Qapla'

            --
            Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)