tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
798
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 27.01.10 22:42 #1
    Wilde Wilde ist offline Rookie
    Registriert seit
    Mar 2007
    Beiträge
    5
    Hallo zusammen,

    ich habe ein DIV in welchem sich zwei weitere DIVs (mit float) befinden. Die beiden inneren DIVs haben eine größere height als das äußere DIV.
    Nun werden meiner Meinung nach alle drei DIVs im FF richtig dargestellt. Nur im IE(6) passt sich das äußere DIV an die größe der beiden inneren an.
    Nun hätte ich gerne einen Workaround für den IE(6), so dass dieser die angegebene Größe des äußeren DIVs behält und sich nicht automatisch anpasst.

    Hier ist der Code:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <style type="text/css">
        div#top {
            height: 100px;
            border: solid 1px red;
        }
 
        div#container1, div#container2 {
            height: 150px; 
            width: 100px; 
            float: left;
            border: solid 1px blue;
        }
    </style>
</head>
 
<body>
    <div id="top">  
        <div id="container1">
            <div>DIV1</div>                 
        </div>
        <div id="container2">
            <div>DIV2</div>                 
        </div>
    </div>
</body>
</html>

    Über einen Hinweis würde ich mich freuen.
    Vielen Dank im Voraus!
     
    Zitieren Zitieren
  2. 28.01.10 01:55 #2
    Avatar von hela
    hela hela ist offline Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.123
    Hallo,

    ich würde um die gefloateten DIV-Blöcke einen "wrapper"-Block legen, der im DIV#top-Block absolut positioniert werden kann. Dazu müsste natürlich der DIV#top-Block relativ positioniert werden. Also so:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Test</title>
  <style type="text/css">
    div#top {
      [COLOR=Blue]position: relative;[/COLOR]
      height: 100px;
      border: solid 1px red;
    }
    [COLOR=Blue]div#wrapper {
      position: absolute;
      top: 0;
      left: 0;
    }[/COLOR]
    div#container1, div#container2 {
      height: 150px;
      width: 100px;
      float: left;
      border: solid 1px blue;
    }
  </style>
</head>
 
<body>
  <div id="top">
    [COLOR=Blue]<div id="wrapper">[/COLOR]
      <div id="container1">DIV1</div>
      <div id="container2">DIV2</div>
    [COLOR=Blue]</div>[/COLOR]
  </div>
</body>
</html>
     
    Zitieren Zitieren
  3. 28.01.10 06:49 #3
    Maik Tutorials.de Gastzugang
    Moin,
    Zitat Zitat von Wilde Beitrag anzeigen
    ich habe ein DIV in welchem sich zwei weitere DIVs (mit float) befinden. Die beiden inneren DIVs haben eine größere height als das äußere DIV.
    Nun werden meiner Meinung nach alle drei DIVs im FF richtig dargestellt.
    Die deiner Meinung nach "korrekte" Darstellung im Firefox und allen anderen standardkonformen Browsern beruht zum einen darauf, dass sie die height:100px-Deklaration für #top gemäß der CSS-Spezifikation als absolute Höhe interpretieren, und nicht wie der IE6 als "Mindesthöhe", und zum anderen du das Umfliessen der beiden Boxen anschliessend nicht mittels der clear-Eigenschaft beendet hast, um so wieder den normalen Textfluß im Dokument herzustellen.

    Letzteres ist nämlich ein beliebtes Thema hier im CSS-Board, dem ich einen "Webmaster FAQ"-Artikel gegönnt habe:

    Wie du den IE6 zu dieser Darstellung zwingst, hat dir hela ja vorgestellt.

    mfg Maik
     
    Zitieren Zitieren
  4. 28.01.10 13:24 #4
    Wilde Wilde ist offline Rookie
    Registriert seit
    Mar 2007
    Beiträge
    5
    Hallo hela und Maik,

    vielen Dank für die Lösung des DIV-Problems!
    Habe es gleich ausprobiert und es hat geklappt.

    Viele Grüße
    Wilde
     
    Zitieren Zitieren
« Rollover bei Schräger Navi | Div soll body nicht zum scrollen bringen »

Ähnliche Themen

  1. DataGridViewComboBox abhängig voneinander
    Von Adan0s im Forum .NET Café
    Antworten: 0
    Letzter Beitrag: 06.08.09, 13:25
  2. mehrere JComboBoxen die voneinander abhängig sind
    Von Nikolaj im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 0
    Letzter Beitrag: 06.05.08, 09:48
  3. 2 Selectfelder abhängig voneinander
    Von piti66 im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 14.12.06, 09:10
  4. Länder -> Bundesländer / Inhalte Selectboxes abhängig voneinander anzeigen
    Von Mik3e im Forum Javascript & Ajax
    Antworten: 5
    Letzter Beitrag: 14.05.06, 00:53
  5. 2 Inputs abhängig voneinander machen
    Von Natheedo im Forum PHP
    Antworten: 0
    Letzter Beitrag: 02.02.06, 23:15

Stichworte