✔ 2 DIVs nebeneinander innerhalb eines Haupt-DIVs

Status
Nicht offen für weitere Antworten.
Eiszwerg

Eiszwerg

Erfahrenes Mitglied
Hallo Community,

HTML: 
<div>
<div style="width:40%;float:left;">
<?php
include ("about.html");
?>
</div>
<div style="width:40%;float:right;">
<?php
include ("edv.html");
?>
</div>
</div>
Der Code funktioniert im IE, aber nicht im FF. Wie kann ich das bewerkstelligen?
Ich danke für jede Anregung!

Gruß
Jan
 
Hi,

kannst du bitte auch erläutern, was bei dir im Firefox nicht funktioniert?

Wenn ich den Code-Schnipsel in ein Testdokument einfüge, werden die beiden Spalten erwartungsgemäß nebeneinander angeordnet.
 
Im FireFox liegen die beiden DIVs untereinander und nicht wie erwartet nebeneinander...

Hmmm... hatte verschwiegen/vergessen, dass das DIV drumherum so aussah:
HTML: 
.text
{
    /*float               : left; */
    padding             : 10px;   
    background-image    : url(../gfx/middle_blue_10.jpg);
    background-repeat   : repeat-y;
   /*background-color    : #000000;*/

}
Nun habe ich das floating ausgeschaltet, hab das DIV aber nicht mehr da...
Ich dreh noch frei hier ;-)
 
Zuletzt bearbeitet:
Dann ist der Grund hierfür an einer anderen Stelle im Dokument zu suchen, denn wie schon erwähnt, funktioniert der gezeigte Quellcode bei mir einwandfrei:
 

Anhänge

  • demo_Eiszwerg.jpg
    demo_Eiszwerg.jpg
    75,2 KB · Aufrufe: 168
Vielleicht musst du dem DIV .text, in dem die beiden DIVs eingebettet sind, eine relative Breite mit auf den Weg geben?

Code: 
.text
{
    float               : left;
    padding             : 10px;
    background-image    : url(../gfx/middle_blue_10.jpg);
    background-repeat   : repeat-y;
    background-color    : #000000;
    width:100%;
}
 
Hello again,

ich muss das Thema leider nochmal aufgreifen, weil es offenbar doch nicht an der Höhe lag.
Hier mal der komplette Code:

style3.css
Code: 
body
{
    background-color    : #0099CC;
    font-family         : arial;
    font-size           : 14px;
    color               : #000000;  
    margin              : 20px;
    padding             : 0;
}

.wrap
{
    padding             : 0px; 
    margin              : 0px;
    width               : 800px;
}

.head
{
    width               : 800px;
    height              : 150px;
    float               : left;
    margin              : 0;
    background-image    : url(../gfx/header_blue_150.jpg);
}

.navi_top
{
    width               : 100%;
    height              : 230px;
    float               : left;
    padding-top         : 0;
    margin              : 0;        
    background-image    : url(../gfx/fill_blue_230.jpg);
    /*background-color    : #000000;*/
    border-bottom       : solid 1px black;    
}

.navi_main
{
    width               : 100%;
    float               : left;
    padding             : 5px;
    margin              : 0;        
    /*background-image    : url(../gfx/middle_blue_10.jpg);
    background-repeat   : repeat-y;*/
    background-color    : #0099CC;
    text-align          : center;
    font-weight         : bold;
}

.navi_sub
{
    width               : 100%;    
    height              : 20px;
    padding-top         : 5px;
    float               : left;    
    background-image    : url(../gfx/middle_blue_10.jpg);
    background-repeat   : repeat-y;
   /*background-color    : #000000;*/
    text-align          : center;
    font-weight         : normal;
    border-top           : solid 1px black;
}

.text
{
    /*float               : left; */
    width               : 100%;
    height              : 100%;
    padding             : 10px;   
    background-image    : url(../gfx/middle_blue_10.jpg);
    background-repeat   : repeat-y;
   /*background-color    : #000000;*/

}

.details
{
    /*width               : 100%;
    float               : left;*/
    margin-bottom       : 10px;
    padding             : 5px;
    background-color    : #88aadd;
    border              : solid 1px black;
    /*background-image    : url(../gfx/bg2.gif);*/
}

.banner
{
    width               : 100%;
    float               : left; 
    padding             : 10px;   
    background-image    : url(../gfx/middle_blue_10.jpg);
    background-repeat   : repeat-y;
    text-align          : center; 
   /*background-color    : #000000;*/
}

.bottom
{
    width               : 100%;
    height              : 85px;
    float               : left;
    padding             : 0px;
    text-align          : center; 
    background-image    : url(../gfx/bottom_blue_85.jpg);
    /*background-color    : #000000;*/       
}

.fett
{
    font-weight         : bold;
    font-size           : 1.4em;
}

a:link, a:visited
{
    text-decoration     : none;
    color               : #000000;
}

a:hover
{
    text-decoration     : underline;
}

und hier die index2.html
HTML: 
<body>
    <div class="wrap">
    <div class="head">
    </div>
    <div class="navi_top">
    </div>
    <div class="navi_main">
        verschiedene Links
    </div>
    <div class="navi_sub">
       verschiedene Links  
    </div>
    <div class="text">
        <div style="width:45%; float:left;">
            <div class="details">
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
            </div>
        </div>
        <div style="width:45%; float:right;">
            <div class="details">
                Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
                Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
            </div>
        </div>
    </div>
    <div class="banner">
    </div>
    <div class="bottom">
    <span style="padding:5px;">copyright by #beuth - 2006-2007</span>
    </div>
  </div>  
  </body>

Mein Problem ist hierbei, dass im IE alles okay ist. Jedoch im FF hört irgendwann der weiße Hintergrund (class="text") auf. Ich kapier bloß einfach nicht warum.

Wer schafft es, mir das näher zu bringen?

Ich danke!
 
Hi,

füg mal nach den beiden floatenden Spalten ein clear-DIV ein, um wieder den normalen Textfluss im Dokument herzustellen:

Code: 
div.clear {
clear:both;
}

Code: 
<div class="text">
        <div style="width:45%; float:left;">
            <div class="details">
               ...
            </div>
        </div>
        <div style="width:45%; float:right;">
            <div class="details">
                ...
            </div>
        </div>
        <div class="clear"></div>
</div>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück