Bernd: Warum wird das CSS unterschiedlich je Doctype interpretiert?

Hallo,

gemäß diesem Tutorial möchte ich 2 Divs nebeneinander darstellen.

Klappt soweit gut, aber wenn ich den Doctype

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

eintrage, werden die DIVs untereinander anstelle nebeneinander dargestellt.

Woran liegt das?

Bernd

  1. Hallo,

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

    
    > eintrage, werden die DIVs untereinander anstelle nebeneinander dargestellt.  
    > Woran liegt das?  
      
    Wenn man keinen Doctype angibt dann stellt der Internet Explorer die Seite mit Hilfe des Quirksmode da, welcher ein anderes Boxmodel verwendet, bei dem padding und border mit in die Breite des Elements gerechnet werden.  
      
    Mit dem Doctype den du da gepostet hast stellt der IE das ganze im Standard-Compilant-Mode dar, welches ein Boxmodel benutzt das padding und border nicht mit in die Breite des Elements mit reinrechnet sondern außen noch dazumacht.  
      
    Übrigens würde ich dir empfehlen den HTML5-Doctype zu benutzen <!DOCTYPE html>, der macht so dass der IE auch im Standard-Compilant-Mode läuft ist aber Kürzer. Außerdem ist es dann ok die HTML5-Tags und Attribute zu verwenden wie <input type="email"> und <nav>, <footer> und ähnliche.  
      
       Jeena  
    ![](http://jeenaparadies.net/pavatar.png)
    
    -- 
    [Jlog](http://jeenaparadies.net/webdesign/jlog/) | [Gourmetica Mentiri](http://jeenaparadies.net/gourmetica-mentiri/)
    
    1. Hi,

      danke für de Hinweise, aber ich schaffs dennoch nicht, 2 Divs nebeneinander zu stellen.
      Es wird nach Div1 umgebrochen und Div2 steht dann unter Div1.

      Hat jemand ne Anleitung, in der beide DIVs gleich hoch sind und ggf. mit Scrollbalken ausgestattet sind?

      Grüß Euch, Bernd

      1. Hat jemand ne Anleitung, in der beide DIVs gleich hoch sind und ggf. mit Scrollbalken ausgestattet sind?

        Zwei DIVs gleich hoch ist kein Fließsatz mehr. Ich verwende dann eine Tabelle und mache die DIVs in den beiden TDs scrollbar.

        Gast

      2. Hi,

        danke für de Hinweise, aber ich schaffs dennoch nicht, 2 Divs nebeneinander zu stellen.

        So vielleicht?

        Ciao, Performer

          
        <!doctype html>  
          
        <html lang="de">  
          
        	<head>  
        		<meta charset="UTF-8" />  
        		<title>Titel</title>  
        		<meta name="description" content="" />  
        		<meta name="keywords" content="" />  
        		<style type="text/css" media="all">  
        *.div-nebeneinander {  
        	border: 1px solid #d61111;	  
        	padding:10px;  
        	text-align:left;  
        	width:30%;  
        	float:left;  
        	}  
        		</style>  
        	</head>  
          
        	<body>  
        		<div class="div-nebeneinander">Div Spalte</div>  
        		<div class="div-nebeneinander">Div Spalte</div>  
        		<div class="div-nebeneinander">Div Spalte</div>  
        		<div style="clear:both;"></div>  
        	</body>  
          
        </html>  
        
        
        1. So vielleicht?

          Ciao, Performer

          Hi Performer,

          dann erklär mir  mal bitte, warum das hier nicht funktioniert?????

            
            
          <!doctype html>  
            
          <html lang="de">  
            
                  <head>  
                          <meta charset="UTF-8" />  
                          <title>Titel</title>  
                          <meta name="description" content="" />  
                          <meta name="keywords" content="" />  
                          <style type="text/css" media="all">  
          *.div-nebeneinander {  
                  border: 1px solid #d61111;  
                  padding:10px;  
                  text-align:left;  
                  width:50%;  
                  float:left;  
                  }  
                          </style>  
                  </head>  
            
                  <body>  
                          <div class="div-nebeneinander">Div Spalte</div>  
                          <div class="div-nebeneinander">Div Spalte</div>  
                          <div style="clear:both;"></div>  
                  </body>  
            
          </html>  
          
          

          Gruß, dank, Bernd

          1. [latex]Mae  govannen![/latex]

            dann erklär mir  mal bitte, warum das hier nicht funktioniert?????

            border: 1px solid #d61111;
                    width:50%;

            Wie viel ergibt denn 50% + 2 * 1px * 2 (für 2 divs) Mehr als 100%!

            Du hast Verständnisschwierigkeiten mit dem Boxmodell

            Stur lächeln und winken, Männer!
            Kai

            --
            It all began when I went on a tour, hoping to find some furniture
             Followed a sign saying "Beautiful Chest", led to a lady who showed me her best)
            SelfHTML-Forum-Stylesheet
            1. Du hast Verständnisschwierigkeiten mit dem Boxmodell

              Ok. Ich wußte echt nicht, dass ich alles da mit reinrechnen muß. Ich dachte, sowas würde autom. berücksichtigt. Wäre ja auch möglich.

              Bernd

              1. [latex]Mae  govannen![/latex]

                Du hast Verständnisschwierigkeiten mit dem Boxmodell

                Ok. Ich wußte echt nicht, dass ich alles da mit reinrechnen muß. Ich dachte, sowas würde autom. berücksichtigt. Wäre ja auch möglich.

                Dabei hat Jeena es doch so schön beschrieben

                Stur lächeln und winken, Männer!
                Kai

                --
                It all began when I went on a tour, hoping to find some furniture
                 Followed a sign saying "Beautiful Chest", led to a lady who showed me her best)
                SelfHTML-Forum-Stylesheet
                1. Hallo Forum,

                  so langsam komme ich in der frage "2 DIVs nebeneinander" durchaus weiter.

                  Aber mal noch eine Frage.

                  Ich müsste mit dem rechten DIV im Quelltext beginnen (weil zu einem Form-Tag zugehörig, der oberhalb des DIv steht), aber dann rutscht das linke DIV leider nach unten.

                  Wie kann ich das linke DIV auf gleiche Höhe bringen?

                  Bernd

                  1. Hallo Forum,

                    so langsam komme ich in der frage "2 DIVs nebeneinander" durchaus weiter.

                    Aber mal noch eine Frage.

                    Ich müsste mit dem rechten DIV im Quelltext beginnen (weil zu einem Form-Tag zugehörig, der oberhalb des DIv steht), aber dann rutscht das linke DIV leider nach unten.

                    Wie kann ich das linke DIV auf gleiche Höhe bringen?

                    Bernd

                      
                    <!doctype html>  
                    <html lang="de">  
                            <head>  
                                    <meta charset="UTF-8" />  
                                    <style type="text/css" media="all">  
                    *.nebeneinanderl {  
                            border-right: 1px solid #FF8000;  
                            padding:10px;  
                            text-align:left;  
                            width:40%;  
                            float:left;  
                            }  
                      
                    *.nebeneinanderr {  
                    	margin-left: 45%;  
                            padding:10px;  
                            text-align:left;  
                            width:40%;  
                            float:left;  
                            }  
                                    </style>  
                            </head>  
                            <body>  
                                    <div class="nebeneinanderr">Div Spalte rechts<br /><br /><br /><br /></div>  
                                    <div class="nebeneinanderl">Div Spalte links<br /><br /><br /><br /></div>  
                                    <div style="clear:both;"></div>  
                            </body>  
                    </html>  
                      
                    
                    
                    1. Hi,

                      Ich müsste mit dem rechten DIV im Quelltext beginnen (weil zu einem Form-Tag zugehörig, der oberhalb des DIv steht), aber dann rutscht das linke DIV leider nach unten.

                      dann lass es doch nach rechts fließen.

                      Ciao, Performer

                        
                      <!doctype html>  
                      <html lang="de">  
                              <head>  
                                      <meta charset="UTF-8" />  
                                      <style type="text/css" media="all">  
                      *.nebeneinanderl {  
                              border-right: 1px solid #FF8000;  
                              padding:10px;  
                              text-align:left;  
                              width:40%;  
                              float:left;  
                              }  
                        
                      *.nebeneinanderr {  
                              padding:10px;  
                              text-align:left;  
                              width:40%;  
                              float:right;  
                              }  
                      div {  
                      	border: 1px solid #ae0e0e  
                      }  
                                      </style>  
                              </head>  
                              <body>  
                                      <div class="nebeneinanderr">Div Spalte rechts<br /><br /><br /><br /></div>  
                                      <div class="nebeneinanderl">Div Spalte links<br /><br /><br /><br /></div>  
                                      <div style="clear:both;"></div>  
                              </body>  
                      </html>  
                      
                      
                      1. hi,

                        <style type="text/css" media="all">
                        *.nebeneinanderl {
                                border-right: 1px solid #FF8000;
                                padding:10px;
                                text-align:left;
                                width:40%;
                                float:left;
                                }
                        div {
                        border: 1px solid #ae0e0e
                        }
                        [/code]

                        das * vor ID und Class kannst du dir sparen. Um Probleme mit verschiedenen Browsern zu umgehen, sollte man auf % verzichten. Einmal die px rechnen geht einfacher!

                        Gruß Niklas

                        --
                        Man muss nicht alles wissen, man sollte aber wissen, wo das nicht gewusste zu finden ist.
                        1. das * vor ID und Class kannst du dir sparen. Um Probleme mit verschiedenen Browsern zu umgehen, sollte man auf % verzichten. Einmal die px rechnen geht einfacher!

                          Ja, aber dann hast Du absolute Werte und die will ich nicht.

                          Bernd

                          1. hi,

                            das * vor ID und Class kannst du dir sparen. Um Probleme mit verschiedenen Browsern zu umgehen, sollte man auf % verzichten. Einmal die px rechnen geht einfacher!

                            Ja, aber dann hast Du absolute Werte und die will ich nicht.

                            Bernd

                            Naja geschmackssache.
                            Wenn ich mir da als die Desings anschaue und das fenster bissel kleiner mache, zack verhunzt das ganze Design.
                            also zumindest einen äußeren Rahmen sollte man absolut festlegen.
                            Entwickeln tut jeder mit über 1024px auflösung, aber es gibt genug mit kleineren bildschirmen bzw. manche die das fenster gerne mal kleiner machen um abschreiben zu können.
                            Wie gesagt geschmackssache.
                            Genauso die sache mit dem scrollbalken immer anzuzeigen, damit es blei kleinen seiten nicht hüpft ... der eine mag es so, der andere nicht =P

                            Gruß Niklas

                            --
                            Man muss nicht alles wissen, man sollte aber wissen, wo das nicht gewusste zu finden ist.
                      2. dann lass es doch nach rechts fließen.

                        Danke. Bin zwar selber auch drauf gekommen, aber dennoch vielen Dank an Dich.

                        bernd