2 divs auf gleiche höhe bringen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aufbau
benutzen
bezug
code
container
datum
display
grund
http
inhalt
nehmen
position
posten
problem
realisieren
spalten
tabelle
test
text
url
-
tja ich möchte zwei divs auf dieselbe höhe bringen...
hier mein html code (ausschnitt)
<div id="parent"> <div id="logo">[...]</div> <div id="left"> <div class="first">[...]</div> </div> <div id="cont"> <div class="first">[...]</div> </div> </div>
hier der dazugehöroge css
#parent{ width:1200px; } #logo{ border-bottom:1px solid #005180; height:100px; width:1200px; padding:0 0 0 0; margin:0 0 0 0; } #left{ width:280px; border-right:1px solid #005180; position:absolute; top:109px; left:auto; margin-right:0px; margin-top:0px; padding-top:0px; } #left div.first{ background-color:#fff; height:100%; padding:5px; padding-top:0; margin-top:0; margin-bottom:60px; } #cont{ margin-left:0; width:919px; position:absolute; top:109px; right:0px; left:289px; margin-top:0px; padding-top:0px; } #cont div.first{ margin-left:0; background-color:#fff; padding:5px; padding-top:0; margin-top:0; margin-bottom:4px; height:100%; }
wenn ich jetzt #left/cont noch height:100% zuweise ist das ganze eben 100% vom bildschirm groß das ist mir dann aber zu groß...
was muss ich also tun um #cont und #left gleichhoch zu bekommen???
mfg andré -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
OK, dann habe ich deine Frage falsch verstanden. Ich dachte, du bringst die divs nicht nebeneinander, doch jetzt habe ich mir deinen Code genauer angesehen und festgestellt, dass #left und #cont bereits nebeneinander sind. Tja, und da sie bei mir auch eigentlich auf gleicher Höhe sind, wirst du wohl dein Problem genauer schildern müssen, bzw. einen Link mit dem gesamten Code hier posten...
-
ich wollte wissen wie ich die divs formatieren muss damit sie gleich hoch sind.
mfg André -
Ich versteh auch nicht ganz genau was du jetzt möchtest, aber wie wäre es bei "height" einfach mal die Pixel anzugeben, anstatt 100% ?
-
andre-morillon schrieb: ich wollte wissen wie ich die divs formatieren muss damit sie gleich hoch sind.
Jetzt haben sie die gleiche Höhe!#cont, #left {height: 100px;}
1.) Es ist immer hilfreicher den Link zu der Seite zu posten bzw. hochzuladen.
2.) Durch eine absolute Angabe haben sie dieselbe Höhe, allerdings sind sie damit nicht mehr variabel in Bezug auf den Inhalt. -
werktags schrieb:
2.) Durch eine absolute Angabe haben sie dieselbe Höhe, allerdings sind sie damit nicht mehr variabel in Bezug auf den Inhalt.
und genau da liegt das problem.... da #cont idR länger ist.... aber #left soll sich eben der höhe von cont anpassen
ease-php.xe.cx -
Ich habe die Befürchtung, es ist nicht einfach so möglich (hab schon mal ein ähnliches Problem gehabt).
Sobald der Mutter-Container keine "height"-Angabe hat, wird auch height:100%; in den Kind-Containern nicht funktionieren.
Folgender Code funktioniert nicht:
<div style="display:block;background-color:yellow;"> <div style="display:block;float:left;height:100%;background-color:red;">Text A</div> Text B<br>rwkhkwrh </div>
Sobald man im Außen-Div eine konkrete Höhe angibt, funktioniert es. Ist der Text zu lang, so dehnt sich nur ein Container aus, ohne dynamisch das andere Div anzupassen.
Das selbe sollte auch bei 2 Divs nebeneinander gelten: der andere <Div> kriegt es nie mit, wenn sich durch den Text die Höhe des einen <Divs> geändert hat.
Ich rate dir, verwende Tables, wenn nicht jetz einer kommt, der Ahnung hat und Licht ins dunkele bringt.
Beitrag zuletzt geändert: 14.6.2009 18:30:12 von zoy -
Du kannst ja die einfache Technik namens „Faux Columns“ ausprobieren. Der Trick dahinter ist einfach, dass man das Elternelement (in diesem Beispiel #parent) ein vertikal gekacheltes Hintergrundbild zuweist, die dann die 2 Spalten auf die gleiche Höhe „verlängern“ soll.
Die 2 Spalten dürfen dann aber nicht absolut positioniert sein, sondern mit `float: left; float: right;` gefloatet und das Elternelement gecleart werden. (z.B. mit `overflow: hidden;`)
Dieses Problem ist schon früher auch viele Male aufgetaucht... Man sollte eine Linkliste für CSS Problemlöser Zeugs erstellen.
Beitrag zuletzt geändert: 14.6.2009 18:45:09 von ryanblack -
Ich hab da mal etwas ausprobiert: Test!
Also zoy kam ja mit Tabelle. Mittels CSS lassen sich aber auch Tabellen realisieren: "display:table;"
Daher erhält zunächst mal #parent, #left, #cont diese Attribut.
Dann brauch #parent eine Höhe, wie "height: 1%". Es muss aber ne Höhe haben, damit es funktioniert.
#left und #cont erhalten: "height:100%;"
Ich habe das jetzt lediglich mit dem FF ausprobiert. Ich kann mir nicht vorstellen, dass das immer so schön funktioniert. Kann aber bestimmt mal jemand testen. Das würde mir auch helfen. -
werktags schrieb:
Wieso sollen #parent, #left und #cont diese CSS Eigenschaft haben? 2 Tabellen in einer Tabelle macht überhaupt keinen Sinn. Und außerdem funktioniert das unter Safari nicht.
Ich hab da mal etwas ausprobiert: Test!
Also zoy kam ja mit Tabelle. Mittels CSS lassen sich aber auch Tabellen realisieren: "display:table;"
Daher erhält zunächst mal #parent, #left, #cont diese Attribut.
Dann brauch #parent eine Höhe, wie "height: 1%". Es muss aber ne Höhe haben, damit es funktioniert.
#left und #cont erhalten: "height:100%;"
Wenn man schon Pseudo Tabellen nutzen will, müssen #left und #cont in ein #wrapper. #parent ist dann die Pseudo Tabelle (`display: table;`), #wrapper eine Pseudo Tabellenreihe (`display: table-row;`) und #left/#cont Pseudo Tabellenzellen (`display: table-cell;`).
Wieso nicht gleich Tabellen nehmen, wenn's so aufwendig ist? Ein weiterer Nachteil ist, dass erst Internet Explorer 8 die CSS Tabellen`display`s unterstützt.#parent #wrapper #cont #left
„Faux Columns“ FTW.
Ryan
Beitrag zuletzt geändert: 14.6.2009 19:50:11 von ryanblack -
ryanblack schrieb: [...]
Ja, da hast du Recht. Mir waren die table-...-Möglichkeiten nicht mal bekannt. Aber da es sie gibt, kann man sie benutzen. Und IE hat mit ja fast allem Probleme.
Wenn man schon Pseudo Tabellen nutzen will, müssen #left und #cont in ein #wrapper. #parent ist dann die Pseudo Tabelle (`display: table;`), #wrapper eine Pseudo Tabellenreihe (`display: table-row;`) und #left/#cont Pseudo Tabellenzellen (`display: table-cell;`).
Wieso nicht gleich Tabellen nehmen, wenn's so aufwendig ist? Ein weiterer Nachteil ist, dass erst Internet Explorer 8 die CSS Tabellen`display`s unterstützt.#parent #wrapper #cont #left
Aber es gibt einen Grund wieso ich keine Tabellen dafür nehmen würde. Ich finde nicht, dass es semantisch richtig wäre eine Tabelle zu benutzen. Tabellen sollen Inhalte/Daten strukturiert darstellen und nicht zum Aufbau des Layout genommen werden. -
werktags schrieb:
Aber es gibt einen Grund wieso ich keine Tabellen dafür nehmen würde. Ich finde nicht, dass es semantisch richtig wäre eine Tabelle zu benutzen. Tabellen sollen Inhalte/Daten strukturiert darstellen und nicht zum Aufbau des Layout genommen werden.
Es stimmt schon, dass Tabellen eigendlich für Daten da sein sollten. Jedoch ist es in soeinem Fall sinnvoll eine Tabelle zu benutzen. Da du ja schon die css Datei hast, kannst du die Tabelle auch in <div> </div> einfügen. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
