2 Divs nebeneinaner sollten gleich hoch sein.

B

Bregi

Aktives Mitglied
Hallo

Ich baue gerade meine page um und mache alles mit div-blöcke. (mal was neues probieren)
Ich habe unter dem header 2 blöcke die heissen menue und main.
Wie sage ich es den beiden blöcken das sie gleich hoch sind.
wink.gif


Im main steht in der regel mehr test als im menue darum möchte ich das sich die beiden aneinander anpassen ohne das ich eine feste grösse angebe.
rolleyes.gif


Gruss
 
Bin Mal gespannt, ob Du eine Antwort erhälst!

Dieser DIV-Wahnsinn muss meiner Meinung nach nicht sein.
Meistens bekommt man nur sehr umständlich hin, was mit einer Tabelle ein Klacks wäre.
 
Klarr kann man es auch mit Tabelln lösen, aber über <divs> bzw. dem dazugehörigen CSS ist halt zentraler mal schnell was geändert als dann später umständlich auf jeder einzelnen Webseite , wo die Tabelln eingebunden sind :)

Es geht ja so:
CODE

<div class="linke_box>Text</div>
<div class="rechte_box>Text</div>




Passende CSS:

CODE

.linke_box {
       background: #f8f8f8;
       width: 500px;
       height: 115px;
       z-index: 1;
       float: left;
       margin: 25px 5px 15px 25px;
       padding: 5px; border:
       solid 1px #acacac; }


.rechte_box {
        background: #f8f8f8;
        width: 350px;
        height: 115px;
        z-index: 2;
        float: left;
        margin: 25px 10px 25px 15px;
        padding: 5px;
        border: solid 1px #acacac;
}




Zu sehen hier - oben die zwei:
apartments24.de/all/index/46

Gruß Dirk
 
...na wenn du den divs feste höhen zuweist, ist es ja auch keine kunst
wink.gif


es geht ja um divs mit variablen höhen...zumindest einer von beiden containern. der andere soll dann einfach immer genauso hoch sein. das ist mit divs und css nicht ganz trivial zu lösen...

Grüße
Oli
 
QUOTE (Japs @ Do 8.01.2009, 16:58) Klarr kann man es auch mit Tabelln lösen, aber über <divs> bzw. dem dazugehörigen CSS ist halt zentraler mal schnell was geändert als dann später umständlich auf jeder einzelnen Webseite , wo die Tabelln eingebunden sind
smile.gif


Er wollte keine Größe zuweisen, du hast jetzt Größe zugewiesen

Aufgabenstellung lesen, um Aufgabe wie gewünscht zu erfüllen .... sonst macht man sich unnötige Arbeit

apropo unnötige Arbeit
mal schnell im CSS as ändern und in vielen(nicht nur im Template?) HTML etwas ändern
das sind jetzt 2 Objecte ... nennen wir es mal Spalten ... Einzeilige Tabelle mit 2 Spalten

Bei table muß man im html ein TD ergänzen um es 3 Spaltig zu machen ....
.... wie machst du es "nur in der CSS" zu einem 3 Spalter?




@Bregi
nimm eine Tabelle ... dann klappt es

Alternative ... Die 2 Boxen sind nicht durch Ramen oder Hintergrundfarbe zu erkennen?
denke das sind sie doch, dann ist die nächste Zeile fürn Mülleimer
Die Eine Box ist Inhalt von der Anderen Box und das ganze dann irgendwie floaten .... wie gesagt, die sehen dann aus wie eines, sollen aber wohl deutlisch als eigenständige Boxen zu erkenne sein
 
hm vielleicht gehts ja mit nem div um beide rundherum, dann die beiden divs innerhalb mit height: 100% oder so...
 
Da bist Du genau im Wespennest des Layoutens mit Divs gestoßen.

Aber: nicht verzagen, es ist möglich.

Recht einfach wird es noch, wenn nur eines der beiden Divs eine variable Höhe hat, dass andere aber immer gleich ist.

Aber auch die zweite Variante, beide variabel in der Höhe zu haben, ist möglich.

Reinlesen dazu kannst Du dich über das Stichwort: Faux Columns

 
Hi

Danke für di zahlreichen antworten.
tongue.gif


Über google bin ich gestern auch bei Faux Columns gelandet.
Faux Columns reicht eigentlich völlig aus, ist zwar ein optischer trick aber der erfüllt den sinn der sache.
biggrin.gif


Gruess
 
@Bregi:

ein Trick von mir:

Wenn das Div mit der Navi transparent sind, dann kannst Du den Hintergrund z.B. so gestalten:

body {
background-image: url(bg.gif);
background-repeat:repeat-y;
}

Somit hast Du auf der linken Seite die Möglichkeit, z.B. eine farblich seperate Spalte über die ganze Höhe des Bildschirms zu ziehen, auch wenn das Div nicht ganz so lang ist. Also effektiv: bg.gif mit 150 Pixel Breite und 1 Pixel Höhe...

Das geht alles viel schneller, als zwei divs auf die gleiche höhe zu bringen.
 
So

Das grundgerüst steht. Was meint ihr dazu?
Im firefox wird es noch nicht korrekt angezeigt, wo liegt der fehler?

Testseite

Gruess
 
...ohne jetzt den Quellcode genau angeschaut zu haben: das sieht nach einem fehlenden

QUOTE clear:both;


aus. Da ist der Firefox etwas pingeliger als der IE. Probier mal.


CODE div.trenn
{
 background-image:url(images/bilderhg/hgmainunten.gif);
 width:900px;
 height:10px;
clear:both;
}



Grüße
Oli
 
Super danke oli dein tip hat was gebracht.
Wenn jetzt noch die hintergrundgrafik im "div.main2" angezeigt wir, bin ich für heute mehr als zufrieden.
Hat jemand einen tip?

Gruess und danke
 
...um das Hintergrundbild anzuzeigen benötigt (zumindest der Firefox) eine richtige Höhenangabe (height:auto; reicht da nicht).

Soweit ich das sehe, ist es aber doch eh "nur" ein Grauton...den würdest du auch mit einer Hintergrundfarbe, statt einem Bild hinbekommen.

Grüße
Oli
 
Hmmmm, ich komme nicht mehr weiter.

Ich habe zwei divs in einem grossen div. Im grossen div ist eine hg grafik um die spalten zu simulieren.
Wenn ich eine höhen angabe mache im grossen div, wiederholt es auch schön die grafik aber leider nur soweit wie ich die höhe angeben habe.

Warum laufen mir die 2 kleinen divs aus dem grossen. Die idee wäre doch das die kleinen divs das grosse höher machen und darin die hg grafik anzeigen. Im IE geht es aber im FF will es leider nicht.
Ich bin doch sicher nicht der einzige der auf diese art ein 2 spaltendesign zu verwirklichen.

Was mache ich falsch?

Gruess
 
Im CSS: Height-Angabe bei main, main2 und menue rausnehmen. Höhe wird vollständig über Inhalt geregelt.

IM HTML: ersten trenn-div innerhalb des main2 div verankern, nicht danach.

Also:
CODE
<div class="main2">
<div class="menue">....</div>
<div class="main">....</div>
<div class="trenn"></div>
</div>



PS: Derzeit nur mit Firebug auf Firefox getestet. IE, etc. solltest Du noch nachtesten.
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben