• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

3 divs nebeneinander - wie

Status
Für weitere Antworten geschlossen.
H

haddi

Neues Mitglied
servus,

ich hab ein problem.
ich will 3 div-container nebeneinander angezeigt haben. aber irgendwie wird mir der 3 kasten nur unten angezeigt..

Code: 
//1 Kasten , links
<div class="visitor" style="float: left; background-color: #d5d5d5; height: 250px; width: 200px;padding:4px;">...</div>

//2 Kasten , mitte
<div class="freundeonline" style="float: middle; background-color: #d5d5d5; height: 250px; width: 200px; margin-left: 230px; padding:4px;">  ...</div>

//3 Kasten , rechts
<div class="geburtstag" style="float: right; background-color: #d5d5d5; height: 250px; width: 200px;padding:4px; margin-left:460px;">  ..</div>

könnt ihr mir helfen? danke!

(siehe anhang)
 

Anhänge

  • html_Bildgröße ändern.jpg
    html_Bildgröße ändern.jpg
    25,7 KB · Aufrufe: 13
Für den dritten Kasten ist kein Platz mehr neben den anderen. Dann rutscht der logischerweise unter die anderen und wird dann rechts gefloatet.
 
Eine Box hat:
Code: 
style= "
height: 250px;
padding-left:4px;
padding-right:4px;
"
258 * 3 = 774px
Das umschließende Element muß also mindestens 774px Innenbreite haben.
Wenn in den Klassen noch Border definiert sind auch entsprechend breiter.
 
Nein, die Höhe eines Elements setzt sich zusammen aus margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom.
 
:-?

aber ich mein wenn du dir das bild anschaust siehst du es ja.
der 3. kasten ist WEIT vom 2 entfernt, und hat noch genug platz..

wie sollte es deiner meinung nach aussehen?
 
Anhand des Bildes seh ich nur, dass der Platz nicht mehr reicht.
 
float: middle gibt's nicht.

So sollte es klappen:

Code: 
<div class="visitor" style="float: left; background-color: #d5d5d5; height: 250px; width: 200px;padding:4px;">links</div>

<div class="freundeonline" style="float: left; background-color: #d5d5d5; height: 250px; width: 200px; margin-left: 30px; padding:4px; display: inline;">mitte</div>

<div class="geburtstag" style="float: left; background-color: #d5d5d5; height: 250px; width: 200px;padding:4px; margin-left:30px; display: inline;">rechts</div>

<div style="clear: both;"></div>
Das "display: inline;" dient dabei lediglich einer Bugbeseitigung des IE 6.
 
super prm! Danke, hat geklappt! ;Jump

// EDIT \\

Und zwar wenn ich jetzt im ie6 reingehe, ist der mittlere kasten kleiner :?:
alle sind auf 250px gestellt.

im firefox werden sie korrekt angezeigt (siehe anhang)
 

Anhänge

  • html.jpg
    html.jpg
    26 KB · Aufrufe: 12
Zuletzt bearbeitet:
Hast du einen Doctype in der Seite?

Setz mal das ganz oben in den Quellcode in die allererste Zeile:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
 
Keine Ahnung, was das für ein IE-Bug wieder ist.

Versuch mal folgendes:
Schreibe sämtliche Style-Angaben in die jeweiligen Klassen, so dass du sie im HTML-Teil nicht angeben musst.

Dann ergänze die CSS um folgende Angabe:

Code: 
* html .freundeonline {height: 270px;}
Den Height-Wert passe dann so an, dass er im IE entsprechend den anderen angezeigt wird.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben