• 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
Werbung:
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.
 
Werbung:
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?
 
Werbung:
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:
Werbung:
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.
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben