Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] 3 divs nebeneinander mit dynamisch gleicher Höhe

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 2
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige 1 2 Weiter
  • #1

    [Erledigt] 3 divs nebeneinander mit dynamisch gleicher Höhe

    Hallo,

    ich positioniere drei divs nebeneinander. der div, welchen den meisten content hat, bestimmt die höhe. diese höhe soll auch von den beiden anderen divs angenommen werden. welche div den meisten platz braucht, ist nicht vorherzusagen.

    im folgenden code sind die drei divs und etwas text. im mittleren div ist in diesem beispiel der meiste text enthalten und somit bestimmt dieser div die höhe. aber leider nicht für den ersten und dritten div. diese beiden sollten aber dieselbe höhe, wie der zweite div annehmen.

    wie geht das? hat jemand ne idee?
    für eure hilfe schon mal herzlichen dank.

    Code:
    <html>
<head>

<style>
div#frame {

}

div#one {
	border: 1px solid #000000;
	width: 30px;
	background-color: #FF0000;
	float: left;
	padding: 5px;
	height: 100%;
}

div#two {
	border: 1px solid #000000;
	width: 580px;
	background-color: #FFFFFF;
	float: left;
	height: 100%;
	padding: 5px;
	height: 100%;
}

div#three {
	border: 1px solid #000000;
	width: auto;
	background-color: #FF0000;
	float: left;
	padding: 5px;
	height: 100%;
}
</style>

</head>

<body>
<div id="frame">
	<div id="one">
	one
	</div>
	
	<div id="two">
	two
four
five

	</div>

	<div id="three">
	three
	</div>
</div>
</body>

</html>
    Stichworte: -
  • #2
    erstell ein bild mit 1px höhe, das die drei hintergrundfarben enthält und pack es als background image in den body, so kannst du die drei verschiedenen hintergründe vortäuschen.

    Kommentar

    • #3
      Ich würde den Hintergrund allerdings eher in dem div-Container definieren, der die drei Spalten umschließt, da der Hintergrund sonst höher wird als gewollt. Außerdem werden dafür mehr als 1 Hintergrundbild benötigt, da die mittlere Spalte in der Breite flexibel ist.

      Mein Vorschlag wäre daher folgender:

      HTML:
      Code:
      <div id="frame">
  <div id="bgframe1">
    <div id="bgframe2">
      <div id="one">
      </div>
      <div id="two">
      </div>
      <div id="three">
      </div>
      <div class="spacer" />
    </div>
  </div>
</div>
      CSS (auf das Wesentliche gekürzt):
      Code:
      .spacer {
    clear : both;
}
#frame {
    background-color : #f00;
}
#bgframe1 {
    background : url(bgone.gif) repeat-y left top;
}
#bgframe2 {
    background : url(bgtwo.gif) repeat-y 30px top;
}
#one {
    width : 30px;
    float : left;
}
#two {
    width : 580px;
    float : left;
}
#three {
    float : left;
}
      EDIT: Den Container #frame könnte man sich auch sparen und die Hintergrundfarbe für die rechte Spalte auch einfach in #bgframe1 oder #bgframe2 definieren.

      Kommentar

      • #4
        das ist gut. sehr gut sogar.

        Kommentar

        • #5
          Zitat von lomtas
          das ist gut. sehr gut sogar.
          Wenn maximal eine Spalte in der Breite flexibel ist, fährt man mit diesem Prinzip recht gut. Hast du eine Idee, wie man vorgehen sollte, wenn beispielsweise alle drei Spalten in der Breite flexibel sind? Dafür habe ich bis jetzt leider noch keine Lösung finden können.

          Kommentar

          • #6
            nee. habe das bisher noch nicht gebraucht. sorry.

            Kommentar

            • #7
              Erstmal danke für die schnelle Hilfe.
              Leider lässt sich das bei mir hier nicht auf diese Weise lösen.

              @xabbuh: Deine Idee ist gut. Gefällt mir. Nur leider kann ich diese Idee nicht in die Praxis umsetzen. Hast du es selbst schon ausprobiert, ob dein Browser die Seite richtig darstellt?
              Falls ja, dann wäre ich dir über nen Link, dass ich es mal selbst betrachten kann, sehr dankbar.
              Falls nein, dann würde ich dich bitten, es tatsächlich auszuprobieren und mir nen Link zu schicken, wo ich es mit meinen eigenen augen betrachten kann
              Das Problem das sich mir stellt ist, dass die one, two, three-divs die übergeordneten nicht in der höhe verändern. somit zeigt es keinen hintergrund an, da die bgframe's keine höhe haben.

              Gibts da noch ne CSS-Eigenschaft, die die div-Abhängigkeiten bestimmt?

              Kommentar

              • #8
                außerdem reagieren IE und mozilla auf div in div auch unterschiedlich.
                beim IE vergrößert sich der div, wenn der innere div die maße des äußeren sprengt. bei mozilla gibt es einfach ne überlappung und der innere ragt über den äußeren hinaus.

                frage: kann man das steuern? gibt es da ne css-eigenschaft, die dafür verantwortlich ist? wie kann ich verhindern, dass der div über den anderen hinausragt?

                Kommentar

                • #9
                  wie kann ich verhindern, dass der div über den anderen hinausragt?
                  Auf die Breite oder Höhe bezogen ?

                  Kommentar

                  • #10
                    auf die Höhe

                    Kommentar

                    • #11
                      Hmmm, geht das nicht wenn dann beim äußeren DIV die Höhe auf auto gestellt ist ?
                      Bin jetzt zu faul, um das selber zu testen ...

                      Kommentar

                      • #12
                        Ich habe das Ganze nun folgendermaßen gelöst:

                        Ich habe ein "Hintergrund-div" in welchem ein zweifarbiges Image geladen wird. Dieses lasse ich 'repeat-y'en. Dieses div bekommt als Eigenschaft noch
                        Code:
                        position: absolute;
                        die darin liegenden divs (one, two, three) können nun mit inhalt gefüllt werden und der hintergrund-div verändert seine höhe mit.

                        als body-hintergrund kann ich ebenfalls ne farbe wählen und schon hab ich die restliche seite nach rechts und nach unten mit farbe gefüllt.

                        im folgenden der code auszugsweise:

                        HTML:
                        Code:
                        <div id="bgframe">
	<div id="one">
	one
	</div>
	
	<div id="two">
   two


blabla
	</div>

	<div id="three">
   three
	</div>
</div>
                        CSS:
                        Code:
                        body {
	background-color: #FF0000;
}

div#bgframe {
	position: absolute;
   background: url("bgone.gif") repeat-y left top;
}

div#one {
	width: 30px;
	float: left;
}

div#two {
	width: 580px;
	float: left;
}

div#three {
	float: left;
}

                        Kommentar

                        • #13
                          Zitat von CIX88
                          Hmmm, geht das nicht wenn dann beim äußeren DIV die Höhe auf auto gestellt ist ?
                          Bin jetzt zu faul, um das selber zu testen ...
                          also, so wie ich das jetzt sehe: NEIN.
                          aber ich lasse mich gern eines besseren belehren.

                          Kommentar

                          • #14
                            Najaaaaaaaaa:

                            http://www.cix88.de/cix_css/css_div/...ehrfach_1.html

                            Kommentar

                            • #15
                              das geht aber nur, wenn für die divs eine höhe definiert wird.
                              wenn die höhe des divs vom text abhängt, dann gehts wohl nicht.

                              Kommentar

                              Vorherige 1 2 Weiter
                              Lädt...
                              X