Float zerhaut Div Anordnung in Firefox

[SE]

Hallo allerseits,

habe folgendes Problem:

Ich habe eine dreispaltige Seite, rein in CSS formatiert (keine Tables). In der mittleren Spalte möchte ich wiederum Div Elemente haben, die untereinander angeordnet werden sollen.

Das funktioniert auch weitestgehend. Wenn ich allerdings in den Div Elementen weitere Divs verwende, und diese per Float positioniere, dann zerhaut es die Anordnung im Firefox (3).

Wenn die Div Elemente mit dem "float: left" und "clear: left" rausgenommen werden (also <div class="category_product_item_pic"> und <div class="clear_left">), dann funktioniert es.

Das Problem tritt nur dann auf, wenn die linke oder rechte Spalte größer ist, als die mittlere. Um dies zu simulieren ist das "min-height: 1000px;" im linken Menü.

CSS

/* Helferlein */  
  
   div.clear_left {  
    clear: left;  
   }  
  
   /* Globales Zeug  + Menü */  
  
   div#container {  
    width: 100%;  
   }  
  
   div#headline {  
    background-image: url({{$tpl_path_images}}navigation/headline.jpg);  
    background-repeat: no-repeat;  
    background-position: center;  
    width: 100%;  
    height: 150px;  
   }  
  
   div#menu_left {  
  
    min-height: 1000px;  
  
    float: left;  
    width: 160px;  
  
    margin: 0;  
    padding: 0 10px 0 10px;  
  
    font-size: 13px;  
  
   }  
  
   div#menu_right {  
  
    float: right;  
    width: 160px;  
  
    margin: 0;  
    padding: 0 10px 0 10px;  
  
    font-size: 13px;  
  
   }  
  
   div#content {  
  
    background-color: #ffffff;  
    border: 1px solid #666666;  
  
    margin: 0px 200px 0px 200px;  
    padding: 10px;  
  
    font-size: 13px;  
  
    /* min-height: 400px; */  
  
   }  
  
  
  
   /* Kategorie Ansicht */  
  
   div.category_product_item_pic {  
    width: 120px;  
    height: 168px;  
  
    background-color: #000000;  
  
    float: left;  
   }

<div id="container">  
  
   <div id="menu_left"></div>  
  
   <div id="menu_right"></div>  
  
   <div id="content">  
  
    <div class="category_product_item">  
  
     <div class="category_product_item_pic"></div>  
  
     <div class="category_product_item_text">  
      <div class="category_product_item_heading">&Uuml;berschrift 1</div>  
      <div class="category_product_item_description">Text 1</div>  
     </div>  
  
     <div class="clear_left"></div>  
  
    </div>  
  
    <div class="category_product_item">  
  
     <div class="category_product_item_pic"></div>  
  
     <div class="category_product_item_text">  
      <div class="category_product_item_heading">&Uuml;berschrift 2</div>  
      <div class="category_product_item_description">Text 2</div>  
     </div>  
  
     <div class="clear_left"></div>  
  
    </div>  
  
    <div class="category_product_item">  
  
     <div class="category_product_item_pic"></div>  
  
     <div class="category_product_item_text">  
      <div class="category_product_item_heading">&Uuml;berschrift 3</div>  
      <div class="category_product_item_description">Text 3</div>  
     </div>  
  
     <div class="clear_left"></div>  
  
    </div>  
  
   </div> <!-- id="content" -->  
  
   <div id="footline"></div>  
  
  </div>

[Alex]

Ich möchte nicht näher drauf eingehen, also fasse ich mich kurz:
Du musst die Divs verschachteln, und dann nur die inneren Divs ansteuern damit das float das Layout nicht zerstört.

Sprich:

  
<div class="main">  
 <div class="sub">  
  <div class="text">Text</div> <!-- diesen steuerst du an -->  
 </div>  
</div>  

Ich hatte auch 2 Wochen mit dem Problem zu kämpfen.
Immer schön verschachteln, ist zwar umständlich doch das Ergebnis spricht für sich.

[SE]

Hallo Alex,

danke schon mal für die Hilfe.

Aber das ist eigentlich genau so, wie ich es versucht habe.

Div "content" ist die mittlere Spalte.

Darin liegt mehrere Divs der Klasse "category_product_item".

Darin wiederum liegt folgends:
* Ein Div der Klasse "category_product_item_pic"
Dieses soll links stehen, enthält normalerweise ein img, hat hier zu testzwecken nur eine gefüllte Fläche.

div.category_product_item_pic {  
float: left;  
}

* Ein Div der Klasse "category_product_item_text"
(Soll rechts davon stehen)
* Ein inhaltsloses Div der Klasse "clear_left"

div.clear_left {  
clear: left;  
}

Ist das nicht genau das, was du beschrieben hast? Wenn nicht, wo liegt der Unterschied?

Und danke noch- sowie schonmal für die Hilfe :)

[Alex]

Versuch mal das Objekt_1 was Links stehen soll mit "float:left" zu verankern, und das Objekt_2 das Links deben dem Objekt_1 stehen soll mit "float:right", damit rutscht das Objekt_2 nach Rechts und ordnet sich neben Objekt_1.

<div class="objekt_1" style="float:left; ">  
 <div class="layerArea">  
  <div class="input_text">Anrede*</div>  
  <div class="input_text">Vorname*</div>  
  <div class="input_text">Nachname*</div>  
  <div class="input_text">Zusatz / Firma</div>  
 </div>  
</div>  
  
<div class="Objekt_2" style="float:right; ">  
 <div class="layerArea">  
<div class="input_feld"<input type="text" name="Titel" id="Titel" maxlength="20"/></div>  
<div class="input_feld"><input type="text" name="Vorname" id="Vorname" maxlength="25" /></div>  
<div class="input_feld"><input type="text" name="Nachname" id="Nachname" maxlength="25" /></div>  
<div class="input_feld"><input type="text" name="Zusatz" id="Zusatz" maxlength="25" /></div>  
 </div>  
</div>

Das Objekt_2 würde sich links neben Objekt_1 anordnen.
Sorry wenn ich dich falsch verstanden habe, und nur mist hier poste :)

Gruss

[Alex]

PS: Achte auch auf die Div-Größe, wenn die Divs zu gross sind, dann ordnen sie sich nicht neben einander an.

[SE]

Hallo Alex,

das Problem ist ja nicht die horizontale Anordnung innerhalb der Divs. Die funktioniert. Das Problem ist, dass die vertikale Ausrichtung verpfuscht wird.

Ich poste hier noch mal den kompletten Code. Du kannst ihn 1:1 als HTML Datei speichern und dann im Browser öffnen. Das Problem ist sonst etwas schwierig zu beschreiben, dürfte anschaulicher sein, wenn man es vor sich sieht.

Und danke nochmal für die Hilfe :)

``<html>
 <head>
  <style type="text/css">
   /* Helferlein */

div.clear_left {
    clear: left;
   }

/* Globales Zeug  + Menü */

div#container {
    width: 100%;
   }

div#menu_left {

min-height: 1000px;

float: left;
    width: 160px;

margin: 0;
    padding: 0 10px 0 10px;

font-size: 13px;

}

div#menu_right {

float: right;
    width: 160px;

margin: 0;
    padding: 0 10px 0 10px;

font-size: 13px;

}

div#content {

background-color: #ffffff;
    border: 1px solid #666666;

margin: 0px 200px 0px 200px;
    padding: 10px;

font-size: 13px;

/* min-height: 400px; */

}

/* Kategorie Ansicht */

div.category_product_item_pic {
    width: 120px;
    height: 168px;

background-color: #000000;

float: left;
   }

</style>
 </head>
 <body>

<div id="container">

<div id="menu_left"></div>

<div id="menu_right"></div>

<div id="content">

<div class="category_product_item">

<div class="category_product_item_pic"></div>

<div class="category_product_item_text">
   <div class="category_product_item_heading">&Uuml;berschrift 1</div>
   <div class="category_product_item_description">Text 1</div>
   </div>

<div class="clear_left"></div>

</div>

<div class="category_product_item">

<div class="category_product_item_pic"></div>

<div class="category_product_item_text">
   <div class="category_product_item_heading">&Uuml;berschrift 2</div>
   <div class="category_product_item_description">Text 2</div>
   </div>

<div class="clear_left"></div>

</div>

<div class="category_product_item">

<div class="category_product_item_pic"></div>

<div class="category_product_item_text">
   <div class="category_product_item_heading">&Uuml;berschrift 3</div>
   <div class="category_product_item_description">Text 3</div>
   </div>

<div class="clear_left"></div>

</div>

</div> <!-- id="content" -->

<div id="footline"></div>

</div>

</body>
</html>``

[SE]

Eine Anmerkung noch:

Ich habe soeben zumindest das Problem identifiziert.

Das Linke und rechte Menü ist ja auch über floats definiert. Nämlich:

 div#menu_left {  
  
    float: left;  
    width: 160px;  
  
    margin: 0;  
    padding: 0 10px 0 10px;  
  
    font-size: 13px;  
  
   }  
  
   div#menu_right {  
  
    float: right;  
    width: 160px;  
  
    margin: 0;  
    padding: 0 10px 0 10px;  
  
    font-size: 13px;  
  
   }

Wenn nun irgendwo innerhalb des Contents ein clear:left auftaucht, dann hat das scheinbar die Wirkung, dass die darauf folgenden Elemente UNTER dem linken Menü platziert werden (aber wohlgemerkte horizontal immer noch in der Mitte).

Gibt es irgendeine Möglichkeit, dass zu umgehen?

[Marc]

Hallo,

Gibt es irgendeine Möglichkeit, dass zu umgehen?

Ich denke mal, dir fehlt noch ein bißchen Hintergrundwissen über gefloatete Elemente. Auf der folgenden Seite ist das ganz gut erklärt.

http://www.css-technik.de/css-examples/219_9/

Ansonsten: es gibt sehr viele fertige dreispaltige Layouts, die du einfach an Deine Bedürfnisse anpassen kannst.

Viele Grüße,
Marc.

[stareagle]

Hallo allerseits,
Das funktioniert auch weitestgehend. Wenn ich allerdings in den Div Elementen weitere Divs verwende, und diese per Float positioniere, dann zerhaut es die Anordnung im Firefox (3).

Möglicherweise hilft dir dieser Artikel:

http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout

Gruß

Stareagle