jogi: 2 Divs nebeneinander - ohne Tabelle?

SELF-Forum

2 Divs nebeneinander - ohne Tabelle?

jogi
– Informationen zu den Bewertungsregeln

Heyho,

Habe mich jetzt endlich von Tabellendesigns lösen wollen, und bin dabei auf ein Problem gestoßen. Ich habe zwei divs, die nebeneinander stehen sollen.
Diese zwei sind wiederum in einem großen div (das eigentich nur der Hintergrundfarbe dient).

Kann mir jemand sagen, wie ich die beiden nebeneinander bekomme?

Danke euch
jogi

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. 2 Divs nebeneinander - ohne Tabelle?

    Dennis Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi jogi,

    Kann mir jemand sagen, wie ich die beiden nebeneinander bekomme?

    Hm, das hatten wir doch gerade erst...

    MfG, Dennis.

    --
    Mein SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:# ss:) de:] js:| ch:{ sh:| mo:} zu:|
    Wer die FAQ gelesen hat, ist klüger! ... und weiß wie man Links macht ;-)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. 2 Divs nebeneinander - ohne Tabelle?

      jogi
      – Informationen zu den Bewertungsregeln

      Kann mir jemand sagen, wie ich die beiden nebeneinander bekomme?

      Hm, das hatten wir doch gerade erst...

      Sorry, das ist nicht von mir... Aber deine Antwort auf das verlinkte Posting ist hilfreich. Danke dir

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. 2 Divs nebeneinander - ohne Tabelle?

        Dennis Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi jogi,

        Sorry, das ist nicht von mir...

        Das dachte ich mir :-)

        Aber deine Antwort auf das verlinkte Posting ist hilfreich. Danke dir

        Bitte. That's my job *g*

        MfG, Dennis.

        --
        Mein SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:# ss:) de:] js:| ch:{ sh:| mo:} zu:|
        Sinnvolles Zitieren: Man zitiert nur Teilsätze des Vorposters auf die man sich bezieht! Nicht einfach alles.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. 2 Divs nebeneinander - ohne Tabelle?

          jogi
          – Informationen zu den Bewertungsregeln

          Mir ist gerade noch etwas aufgefallen: Das große div, das die anderen beiden umschließt, wird bei float reduziert auf eine minimale Größe. Wie kann ich das verhindern, ohne das mit min-height (weil der IE damit Probleme macht)?

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. 2 Divs nebeneinander - ohne Tabelle?

            Detlef G.
            – Informationen zu den Bewertungsregeln

            Hallo jogi

            Mir ist gerade noch etwas aufgefallen: Das große div, das die anderen beiden umschließt, wird bei float reduziert auf eine minimale Größe. Wie kann ich das verhindern, ohne das mit min-height (weil der IE damit Probleme macht)?

            Du kannst z.B. als letztes, hinter den Divs, die nebeneinander liegen sollen,
            ein Element einfügen, das ein clear (Fortsetzung bei Textumfluss) bekommt.
            Oder du kannst das umschließende Div auch floaten.

            Auf Wiederlesen
            Detlef

            --
            - Wissen ist gut
            - Können ist besser
            - aber das Beste und Interessanteste ist der Weg dahin!
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Ich frage weiter

              bilbo beutlin
              – Informationen zu den Bewertungsregeln

              Ich greife das noch einmal auf. Habe jetzt folgenden HTML-Quellcode:

              [..]

                
<body>  
  
 <div class="main">  
  
  <div class="logo_top" align="center"><img src="logo_top.jpg" alt="" style="border:medium solid #EEEEEE;"></div>  
  
<!-- Navigation -->  
  <div class="navi_left">  
   <div class="suppnt">Ueberpunkt</div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
   <div class="suppnt">Ueberpunkt</div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
   <div class="suppnt">Ueberpunkt</div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
   </div>  
<!-- Navigation Ende -->  
  
  <div class="inhalt">
~~~~~~php
  
   <?php echo ".inhalt\n"; ?>
~~~~~~html
  
  </div>  
  
<span class="footer">&copy; 2005 - Street-Tigers Nebringen</span>  
 </div>  
  
</body>

              [..]

              der mit folgendem CSS formatiert ist:

                
 a{  
  color:#000000;  
  text-decoration:none;  
 }  
  
  
  
/* --------------------------- */  
  
  
  
/* Navigation */  
  
 .navi_left{  
  background-color:#FFFFFF;  
  border:thin solid #000000;  
  width:22%;  
  margin:3% 0 0 3%;  
  float:left;  
 }  
  
 .suppnt{  
  margin-left:5%;  
  font-weight:bold;  
  border-top:thin dashed #CCCCCC;  
  border-bottom:thin dashed #CCCCCC;  
 }  
  
 .navipoint{  
  width:100%;  
  border-top:thin dashed #CCCCCC;  
  border-bottom:thin dashed #CCCCCC;  
 }  
  
 .navipoint a{  
  margin-left:10%;  
 }  
  
 .navipoint:hover{  
  background-color:#DDDDDD;  
  background-image:url(005.gif);  
  background-position:right;  
  background-repeat:no-repeat;  
 }  
 .navipoint:hover a{  
  color:#003366;  
  font-weight:bold;  
 }  
  
  
  
/* Erscheinungsbild */  
  
 body{  
  font-family:Arial, Helvetica, sans-serif;  
  font-size:13.4px;  
  background-color:#E6E6E6;  
 }  
  
 .main{  
  border:thin solid #000000;  
  width:75%;  
  background-color:#D1E4E2;  
  position:relative;  
 }  
  
 .logo_top{  
  margin-top:3%;  
 }  
  
  
  
/* Content-div */  
  
 .inhalt{  
  border:thin solid #000000;  
  float:right;  
  margin-right:2%;  
 }  
  
  
  
/* Footer */  
  
 span.footer{  
  background-color:#FF9900;  
  margin-bottom:3%;  
  margin-top:3%;  
  text-align:center;  
  display:block;  
  border-top:thin solid #000000;  
  border-bottom:thin solid #000000;  
  clear:both;  
 }

              Also das mit clear klappt nicht. Und floaten möchte ich das div.main nicht, weil das eigentlich in die Mitte soll.
              Kann mir jemand sagen, wie ich das anstellen muss, damit das div.inhalt neben das div.navi_left kommt?

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Ich frage weiter

                Detlef G.
                – Informationen zu den Bewertungsregeln

                Hallo  bilbo,

                zu deinem HTML lies bitte, was ich dir bereits in
                https://forum.selfhtml.org/?t=107757&m=669890 geschrieben habe.

                Übrigens, es ist besser, die Problemseite online zu stellen und hier zu
                verlinken, als lange Quelltexte hier zu posten.

                .inhalt{
                  border:thin solid #000000;
                  float:right;
                  margin-right:2%;
                }

                Wenn du keine Breite angibst und floatest, wird die Stelle gesucht, wo Platz
                ist. Das ist unterhalb der Navi.

                Schau dir mal FloatLeft Test und Divs mit prozentualen Breiten und float an.
                Dort siehst du jeweils verschiedene Varianten zu float.
                Mehrspaltige CSS-basierte Layouts sollte für dich auch ganz besonders interessant sein.

                Auf Wiederlesen
                Detlef

                --
                - Wissen ist gut
                - Können ist besser
                - aber das Beste und Interessanteste ist der Weg dahin!
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln