Vision: 2 divs in div nebeneinander?

SELF-Forum

2 divs in div nebeneinander?

Vision
– Informationen zu den Bewertungsregeln

Hallo,

ich habe schon wieder ein div Problem:

div.minibox {

background-color: transparent;
  border-right: 1px solid #669999;
  padding: 5px;
  width: 20%;
  float: left;
}

div.maxibox {

background-color: transparent;
  padding: 5px;
}

<div>

<div class="minibox">
   viel bla und noch mehr
 </div>
 <div class="maxibox">
  blalalalal
 </div>

</div>

Wie bekomme ich die divs minibox und maxibox gescheit nebeneinander?
Im Endeffekt sollten es 2 Zellen nebeneinander sein, wie in einer Tabellenzeile. ALso ob ich da mit float überhaupt richtig bin weiß ich nicht.
Mozilla und Opera machen es zumindest halb richtig, allerdings klebt da der Text von maxibox direkt an minibox und ist auch nicht zum Abstandhalten zu bewegen.
Im IE 6 ist maxibox überhaupt gleich unter minibox.

mfg Vision

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. 2 divs in div nebeneinander?

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    Wie bekomme ich die divs minibox und maxibox gescheit nebeneinander?

    mit float.
    http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float

    gruss,
    wahsaga

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. 2 divs in div nebeneinander?

      Vision
      – Informationen zu den Bewertungsregeln

      mit float.
      http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float

      gruss,
      wahsaga

      Wie du siehst habe ich das ja versucht. Aber irgendwie klappt es nicht so wie es sollte. Beim IE 6 steht maxibox dann nicht schön rechts neben minibox sondern irgendwie halb darunter.
      Bei Mozilla und Opera steht es zwar daneben, klebt aber mit 0 Pixel Abstand an minibox. Ich habe auch mal testweise einen Rahmen um maxibox gezogen und der ging seltsamerweise auch um minibox (in Mozilla und Opera).

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. 2 divs in div nebeneinander?

      Vision
      – Informationen zu den Bewertungsregeln

      Ich habe die Seite jetzt mal hochgeladen: http://www.alieneye.net/test/index2.htm

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. 2 divs in div nebeneinander?

        Klaus B.
        – Informationen zu den Bewertungsregeln

        Und ich habs kopiert und zwei Änderungen eingefügt, lesen kannst Du ja:

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "xhtml1-transitional.dtd">

        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

        <head>

        <title>.:: A L I E N E Y E ::.</title>

        <style type="text/css">
        html, body {

        width: 90%;
          height: 90%;
        }

        body {

        background-color: #669999;
          padding: 20px;
          margin: 0px;
        }

        div.main_box {

        width: 800px;
        }

        div.logo_text {

        background-color: #99CC66;
          border-bottom: 1px solid black;
        }

        div.menu {

        background-image: url(images/bg_top_menu.png);
        }

        div.border_left {

        background: url(images/border.png) left repeat-y;
          border-bottom: 1px solid black;
        }

        div.shortnav_border_right {

        background: url(images/border.png) right repeat-y;
          background-color: #99CC99;
          padding: 0px;
          margin-left: 5px;
          vertical-align: middle;
        }

        div.shortnav_main {

        background-color: #99CC99;
          border-bottom: 1px solid #669999;
          padding: 3px;
          margin-left: 20px;
          margin-right: 25px;
          vertical-align: middle;
        }

        div.main {

        background: url(images/border.png) right repeat-y;
          background-color: #99CC99;
          padding: 20px;
          margin-left: 5px;
          vertical-align: top;
        }

        div.minibox {

        background-color: yellow;
          border-right: 1px solid #669999;
          padding: 5px;
          width: 20%;
          float: left;
        }

        div.maxibox {

        background-color: orange;
          padding: 5px;
          width: 300px;
          float: left;
        }

        div.bottom_left {

        background: url(images/bottom_left_corner.png) left no-repeat;
        }

        div.bottom_right {

        background: url(images/bottom_right_corner.png) right no-repeat;
        }

        div.bottom_line {

        background: url(images/bg_bottom.png) repeat-x;
          height: 26px;
          margin-left: 30px;
          margin-right: 30px;
          text-align: center;
        }
        </style>

        </head>

        <body>

        <div class="main_box">

        <div><img src="images/top_left_logo.png" style="width:163px; float:left;" alt="ALIENEYE" /></div>
         <div class="logo_text"><img src="images/top_main_text.png"></div>
         <div class="menu"><img src="images/btn_home_off.png" name="btn_home" alt="Home" onmouseover="btn_home.src='images/btn_home_on.png';" onmouseout="btn_home.src='images/btn_home_off.png';" /><img src="images/btn_community_off.png" alt="Community" name="btn_community" onmouseover="btn_community.src='images/btn_community_on.png';" onmouseout="btn_community.src='images/btn_community_off.png';" /><img src="images/btn_products_off.png" alt="Produkte" name="btn_products" onmouseover="btn_products.src='images/btn_products_on.png';" onmouseout="btn_products.src='images/btn_products_off.png';" /><img src="images/btn_contact_off.png" alt="Kontakt" name="btn_contact" onmouseover="btn_contact.src='images/btn_contact_on.png';" onmouseout="btn_contact.src='images/btn_contact_off.png';" /></div>

        <div class="border_left" style="border-width: 0px;">
          <div class="shortnav_border_right">
           <div class="shortnav_main">

        Startseite >> Furz
           </div>
          </div>
         </div>

        <div class="border_left">
          <div class="main">

        <div class="minibox">
            minibox
           </div>

        <div class="maxibox">
            maxibox (sollte auf gleicher höhe mit minibox sein). Und noch was Text
           </div>
          <br style="clear:both;" />
          </div>
         </div>

        <div class="bottom_left">
          <div class="bottom_right">
           <div class="bottom_line">

        <div style="padding-top: 3px;">
             noch mehr bla
            </div>
           </div>
          </div>
         </div>

        </div>

        </body>

        </html>

        MfG
        Klaus

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. 2 divs in div nebeneinander?

          Vision
          – Informationen zu den Bewertungsregeln

          Vielen Dank erstmal. Opera und Mozilla machen alles richtig, nur beim IE wird das Hintergrund div nicht weiter nach unten verlängert.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. 2 divs in div nebeneinander?

            C2H5OH
            – Informationen zu den Bewertungsregeln

            Vielen Dank erstmal. Opera und Mozilla machen alles richtig, nur beim IE wird das Hintergrund div nicht weiter nach unten verlängert.

            Ist das nicht normal?

            Mozilla kann fast alles und macht auch fast alles richtig.
            Opera kann viel, hat aber z.T. auch große Probleme.
            MSIE kann wenig, aber in der Regel funktioniert es - zumindest nach den eigenen Vorstellungen von MS.

            Gruß
            C2H5OH

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln