Simon: Problem bei auto height für 3 Div's

SELF-Forum

Problem bei auto height für 3 Div's

Simon
– Informationen zu den Bewertungsregeln

Hi, hab da ein kleines Problem. Hoffe dass ich mich dieses mal verständlicher ausdrücke als das letzt mal. Also ich habe ein Div (Wrapper). In diesem Div befinden sich 3 andere (Div1 =>ROT, Div2 =>Blau und Div3 =>Grün). Ich würde gerne Div1 rechts von Div2 anordnen, und Div3 gleich darunter.

Wenn ich jetzt bei Div1 und Div2 die selbe Höhe angebe passts ja auch so wie ich es haben will. Das beste wäre außerdem dass sich die Höhe bei Div1 automatisch anpasst weil dort das Gästebuch ist.

Ich habe mal 3 Beispiele gemacht, habs sie nur leider nicht online stellen können, aber vielleicht könnt ihr Sie ja kurz Lokal speichern:

Also In Test1.html überdeckt Div1  Div 3, in Test2.html bleibt mir die Weiße Fläche über (ich dachte mir dass wenn ich dem Div Wrapper die selbe Hintergrundfarbe gebe, also Rot, würde es das Problem lösen, nur da Div 2 nie länger als Div 1 ist immer das Problem wie in Test1.html

Test3.html stellt das dar was ich erreichen will, hab dort aber mit <br>'s nachgeholfen um euch mein Wunschergebnis zeigen zu können.

So hier mal die 3 Testseiten:

Test1.html

<html>
<head>
<style type="text/css">
*{
margin: 0;
}
#wrapper{
border: 1px solid #000;
width: 800px;
margin: 0 auto;
height: 800px;
}
#div1 {
background-color: red;
width: 600px;
float: right;
}

#div2{
background-color: blue;
width: 200px;
}

#div3{
background-color: green;
width: 800px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="div1">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>
</div>
<div id="div2">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="div3">
div3
</div>
</div><!--wrapper-end-->
</body>
</html>

Test2.html

<html>
<head>
<style type="text/css">
*{
margin: 0;
}
#wrapper{
border: 1px solid #000;
width: 800px;
margin: 0 auto;
height: 800px;
}
#div1 {
background-color: red;
width: 600px;
float: right;
}

#div2{
background-color: blue;
width: 200px;
}

#div3{
background-color: green;
width: 800px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="div1">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>
</div>
<div id="div2">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>
</div>
<div id="div3">
div3
</div>
</div><!--wrapper-end-->
</body>
</html>

Und Mein Wunschergebnis Test3.html:

<html>
<head>
<style type="text/css">
*{
margin: 0;
}
#wrapper{
border: 1px solid #000;
width: 800px;
margin: 0 auto;
}
#div1 {
background-color: red;
width: 600px;
float: right;
}

#div2{
background-color: blue;
width: 200px;
}

#div3{
background-color: green;
width: 800px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="div1">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>
</div>
<div id="div2">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div id="div3">
div3
</div>
</div><!--wrapper-end-->
</body>
</html>

Hoffe ich hab mich verständlich ausgedrückt, aber mit den Testseiten dürfte es ja gehn.

MfG Simon

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Problem bei auto height für 3 Div's

    Fragipani
    – Informationen zu den Bewertungsregeln

    Hi,
    wenn du deinem div Element mit der id wrapper eine feste Hoehe per CSS
    gibst, kann sich der Inhalt von deinen inneren div Elementen nicht anpassen...

    Arbeite mit prozentualen Angaben, wenn du ein flexibles Layout moechtest.
    Dann kannst du auch dem "zu kleinen div Element" eine Hoehe mitgeben, sodass es sich
    nicht nur nach dem Inhalt richtet

    Gruss Fragipani

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Problem bei auto height für 3 Div's

      Simon
      – Informationen zu den Bewertungsregeln

      Ok danke, werd ich gleich ausprobieren und mich bei Fragen noch mal melden.

      MfG
      Simon

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Problem bei auto height für 3 Div's

        Simon
        – Informationen zu den Bewertungsregeln

        Hab das mal ausprobiert, nur ändert dass nichts an  dem Problem.
        Könntest du mir das vielleicht anhand von dem Beispiel dass ich vorher gegeben habe zeigen ?

        MfG
        Simon

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Problem bei auto height für 3 Div's

          Fragipani
          – Informationen zu den Bewertungsregeln

          Ich dachte an so etwas:

          div#div1 {
           float:right;
           height:80%;
           background-color:#ff0000;
          }
          div#div2 {
           height:80%;
           background-color:#00ff00;
          }
          div#div3 {
           clear:both;
           height:20%;
           background-color:#0000ff;
          }

          <div id="wrapper">
            <div id="div1">
              Langer Textt
            </div>
            <div id="div2">
              kurzer text
            </div>
            <div id="div3">
              div3
            </div>
          </div>

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Problem bei auto height für 3 Div's

            Simon
            – Informationen zu den Bewertungsregeln

            Nein funktioniert leider nicht.

            Hier mal dein Beispiel mit text. Hab auch schon versucht die Breie anzugeben, was aber auch nichts geändert hat.
            Gibts vielleicht noch eine andere Möglichkeit?

            Beispiel:

            <html>  
<head>  
<style type="text/css">  
div#div1 {  
 float:right;  
 height:80%;  
 background-color:#ff0000;  
}  
div#div2 {  
 height:80%;  
 background-color:#00ff00;  
}  
div#div3 {  
 clear:both;  
 height:20%;  
 background-color:#0000ff;  
}  
</style>  
</head>  
<body>  
<div id="wrapper">  
  <div id="div1">  
  <p>  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.  
</p>  
  </div>  
  <div id="div2">  
 <p>  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,  
</p>  
  </div>  
  <div id="div3">  
    div3  
  </div>  
</div>  
</body>  
</html>
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Problem bei auto height für 3 Div's

              Fragipani
              – Informationen zu den Bewertungsregeln

              Nein funktioniert leider nicht.

              Du verfaellst wieder in deine Schwammigkeit bei der Problembeschreibung.

              Hier mal dein Beispiel mit text. Hab auch schon versucht die Breie anzugeben, was aber auch nichts geändert hat.

              Die Breite solltest du natuerlich angeben. Stimmt.

              Was stimmt dann nicht?

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Problem bei auto height für 3 Div's

                Simon
                – Informationen zu den Bewertungsregeln

                Du verfaellst wieder in deine Schwammigkeit bei der Problembeschreibung.

                Sorry

                Was stimmt dann nicht?

                Wenn ich die Breite angebe, in dem Fall 600 und 200px ensteht ein Spalt zwischen den Beiden Div'S, was mich verwundert hat weil ich ja nirgends die Breite vom Div Wrapper angegeben habe sondern nur seine Höhe mit 80%.

                Hier mal das Beispiel mit Breite:

                <html>  
<head>  
<style type="text/css">  
div#div1 {  
 float:right;  
 height:80%;  
 background-color:#ff0000;  
 width: 600px;  
}  
div#div2 {  
 height:80%;  
 background-color:#00ff00;  
 width: 200px;  
}  
div#div3 {  
 clear:both;  
 height:20%;  
 background-color:#0000ff;  
}  
</style>  
</head>  
<body>  
<div id="wrapper">  
  <div id="div1">  
  <p>  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.  
</p>  
  </div>  
  <div id="div2">  
 <p>  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,  
</p>  
  </div>  
  <div id="div3">  
    div3  
  </div>  
</div>  
</body>  
</html>
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Problem bei auto height für 3 Div's

                  Simon
                  – Informationen zu den Bewertungsregeln

                  Ok, jetzt funktioniert alles,

                  Danke nochmal für die Hilfe, ansich war mein größter Fehler dass ich im Div3 nicht clear: both gemacht habe.

                  MfG
                  Simon

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln