CSS Box float - clear

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS Box float - clear

    Hallo,

    habe mal eine Frage zu CSS.
    Warum wird dieser Code:

    Code:
    <div style="width: 300px; border:1px solid green;">
    
    	<!--Inhalt-->
    	<div style="border:1px solid red;">
    
    		<div style="float: left;border:1px solid blue;">
    			1. linke Box
    		</div>
    		<div style="float: left;border:1px solid blue;">
    			2. Box <br>mit mehr Inhalt
    		</div>
    		<br style="clear:both;">
    	</div>
    
    	Text unten
    </div>
    so dargestellt:


    wenn er eigentlich so:


    aussehen soll:
    Gut geraten ist halb gewußt.

  • #2
    Also nach dem blauen Rahmen habe ich ja
    Code:
    <br style="clear:both;">
    geschrieben, aber warum wird das nicht beachtet?
    Gut geraten ist halb gewußt.

    Kommentar


    • #3
      also bei mir sieht es so aus, wie es sein sollte, also bild 2. welche doctype hast du angegeben, welchen browser benutzt du?

      peter
      Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
      Meine Seite

      Kommentar


      • #4
        Hatte das im Thema geschrieben,aber er hatte das Thema beim 1. mal nicht gespeichert.

        Code:
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <meta http-equiv="Content-Language" content="de">
        <meta http-equiv="Content-Style-Type" content="text/css">
        <meta http-equiv="Content-Script-Type" content="text/javascript">
        Also ich habe mir jetzt den IE8 geholt und da sieht es so aus.
        (kann ich jedem nur empfehlen sich darauf vorzubereiten)

        Im IE 8 soll css2.1 sein oder so.^^
        Aber was ist daran anders, bzw. warum verschiebt sich das alles?
        Gut geraten ist halb gewußt.

        Kommentar


        • #5
          probier mal als doctype xhtml 1.0 transitional. das hatte ich bei mir vorgegeben. mit html transitional arbeite ich seit über drei jahren nicht mehr. also k.a.

          peter
          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
          Meine Seite

          Kommentar


          • #6
            Nicht schlecht, bisschen was hat sich getan.
            Ich habe

            Code:
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
            in

            Code:
            <!DOCTYPE html
                 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            geändert und denn sieht es nicht mehr so:


            sondern so:


            aus.
            Aber wie erreiche ich das die blauen Boxen komplett in der roten Box kommt?
            Ich danke dir sehr für CSS4You, das war früher immer mein nachschlagewerk
            Kommt da noch irgendwann was für css2 ? ^^
            Gut geraten ist halb gewußt.

            Kommentar


            • #7
              Nachdem ich aus
              Code:
              <br style="clear:both;">
              das gemacht hatte:
              Code:
              <br style="clear:both;display:block;">
              und es auch nicht klappte, hatte ich:

              Code:
              <div style="clear:both;"></div>
              verwendet und denn klappte es,wie es sollte im
              IE5.5 IE6 und IE8 und Firefox.
              Müßte ich nur noch im IE7 testen.
              Gut geraten ist halb gewußt.

              Kommentar


              • #8
                Ich hab mal noch ein line-height reingemacht und auch mit float: right probiert. Wunderbar auch im IE7.
                Code:
                <div style="width: 300px; border:1px solid green;">
                
                	<!--Inhalt-->
                	<div style="border:1px solid red;">
                
                		<div style="float: left;border:1px solid blue;">
                			1. linke Box
                		</div>
                		<div style="float: right;border:1px solid blue;">
                			2. Box <br>mit mehr Inhalt
                		</div>
                		<div style="clear:both;line-height: 0;"></div>
                	</div>
                
                	Text unten
                </div>
                Gut geraten ist halb gewußt.

                Kommentar

                Lädt...
                X