CSS divs gleich hoch ?!

D

Dawen

0
Hallo !

HTML: 
<div style="width:500px;overflow:hidden">
     <div style="width:250px;float:left">  
                           Content
     </div>
     <div style="width:250px;float:left">
                         Content
     </div>
</div>

Ich habe also Layout, mit zwei div. Ich habe mal die Grundversion hier genommen, wie komme ich es hin, dass das rechte und links div gleich hoch sind ?
 
Indem Du beiden noch eine feste Höhe gibst. Schau Dir ggfs. mal Faux Columns an.
 
Hi !

Feste Höhe geht nicht, der Inhalt der beiden divs ist dynamisch. Mit einer Tabelle ist das ja kein Problem, aber bei divs ?!
 
-> einfach
Code: 
<div style="width:500px;overflow:hidden;height:20%">
     <div style="width:250px;float:left">  
                           Content
     </div>
     <div style="width:250px;float:left;height:20%">
                         Content
     </div>
</div>

-> wrapper drum bauen
Code: 
<div style="height:200px">
<div style="width:500px;overflow:hidden;height:100%">
     <div style="width:250px;float:left">  
                           Content
     </div>
     <div style="width:250px;float:left;height:100%">
                         Content
     </div>
</div>
</div>

 
Das ändert ja nix, weil die Höhe dann wieder fix ist.

Wenn man das nicht über ein Hintergrundbild lösen will, gibt's dafür eigentlich nur einen Workaround, der über negative Margins läuft. Sinngemäß:

Code: 
<div style="overflow: hidden; width: 500px;">
  <div style="float: left; width: 250px; padding-bottom: 30000px; margin-bottom: -30000px;">...</div>
  <div style="float: left; width: 250px; padding-bottom: 30000px; margin-bottom: -30000px;">...</div>
</div>

Die beiden Spalten dürften sich in diesem Fall maximal um eine Länge von 30000px unterscheiden. Es gibt eine Maximalgröße dafür, die irgendwo in dem Bereich liegt, aber das sollte eigentlich auch immer ausreichend sein.
 
Dawen hat gesagt.:
Hi !

Feste Höhe geht nicht, der Inhalt der beiden divs ist dynamisch. Mit einer Tabelle ist das ja kein Problem, aber bei divs ?!
Zum Vergrößern anklicken....


ich hatte leider den post überlesen,
nunja dynamische divs kann man sehr gut mit js bzw. unteranderem auch mit php realisieren. gibt dazu jede menge bei google.
das wäre meine lösung um die divs perfekt an den inhalt anzupassen.
 
hallo

ich loese das immer mit einem eltern div der dan ein sich wiederholendes hintergrundsbild hatt welches das ausehen der 2 divs imitiert
und dann einem leren div mit clear:left; dammit der eltern div die groesste groesse annimmt.

HTML: 
<div style="width:500px; background:url('hintergrundbild mit zwei kaestchen nebeneinander in passender groesse') repeat-y center center;">
         <div style="float:left; width:250px;">
                    content
         </div>
         <div style="float:left; width:250px;">
                    content
         </div>
         <div style="clear:left;"></div>
</div>
gruss ronco
 
das aber eher fusch am Bau ;) du bildest damit zu viele Redundanzen, die überflüssig den Code verschmutzen. Schlecht für die Ladezeit beim Browser und schlecht für den Entwickler, da man bei so einer Layoutgestaltung auch schnell die Übersicht verliert.

Wenn man dies 50 mal macht, 50x leere Div -> 50x50 -> 2500 (20000 Bit) Byte unnütz pro Seite.
 
hallo mani

ich denke es giebt hier keine 100% saubere loesung .. entweder leidet die optic oder eben der code... ich habe auch mal andere moeglichkeiten gesehn wie mann den eltern div ohne zusaetzlichen div dazu kriegt die hoehe anzunehmen war glaub ich z.B. was mit
HTML: 
elterndiv:after {
   content: ".";
   font-size: 1%;
   color:gleich wie hintergrund;
   }
meine aber da haettes browser probleme gegeben...
hier sind einige moeglichkeiten http://www.ejeliot.com/blog/61

EDIT:

so war am saubersten .. man giebt dem eltern div auch float:left; dann kann man auf den clear div verzichten.
HTML: 
<div style="width:500px; float:left; background:url('hintergrundbild mit zwei kaestchen nebeneinander in passender groesse') repeat-y center center;">
	<div style="float:left; width:250px;">
	         content
	</div>
	<div style="float:left; width:250px;">
		 content
	</div>
</div>
 
Zuletzt bearbeitet:
nunja, das heißt dann aber auch, dass immer das Bild geladen werden muss im Hintergrund und das die Zugriffszeit verdoppelt wird.

Ich finde die Lösung einer Funktion am besten, wo z.B. ein PHP Script ausließt wie viel Zeichen sich im Div befinden und damit die höhe definiert. Damit haste kein fusch am Bau, keine probleme mit Browsern die es falsch interpretieren etc.

Habe deine Möglichkeit ausgestet, es funktioniert aber ich finde es bringt keine 100% Sicherheit, zudem ist wie oben schon genannt durch die Redundanzen sehr hoch. Nicht nur wegen dem Überflüssigen Code sondern auch wegen dem Hintergrundbild.

Ich selber habe bei meinen HP viele probleme gehabt da sie sehr Bild lastig ist. Nunja, ich wollte halt mal einfach was "krankes" mit PS bauen. Der größte Nachteil den ich nicht bedacht hatte, dass sie sehr lange zum laden brauch, das habe ich mit einem PreLoader gelöst aber eine gute Variante ist es nun nicht. Deswegen würde ich immer empfehlen "So viele Bilder wie nötig und so wenig wie möglich!" und deine Variante weißt auf viele "unnötige" Bilder hin.
 
Das mit den hintergrundsbildern ist kla .. aber selbst wenn du mit PHP die zeilen ausliesst kann das immernoch mit vorgegebenen schriftgroessen und fonts probleme machen (z.B. bei vielen handy browsern)da php ja immer nur von einem standart ausgehen kann. naechste moeglichkeit ist javascript ... das kann zwar auch abgeschaltet sein aber davon gehe ich, wenn ich webseiten mache nicht aus. hab mal ne function gebastelt :P
HTML: 
if(window.addEventListener){
    window.addEventListener("load", function() {setHeight();}, false);
}else if(window.attachEvent){
    window.attachEvent("onload", function() {setHeight();});
}
function setHeight(){
    var ContDivs = document.getElementsByTagName('div');
    for(i=0;i<ContDivs.length;i++){
        if(ContDivs[i].className == "RightHeight"){
            var maxheight = 0;
            var ContChilds = ContDivs[i].getElementsByTagName('div');
            for(y=0;y<ContChilds.length;y++){
                var ThisHeight = parseInt(ContChilds[y].style.height || ContChilds[y].innerHeight || ContChilds[y].clientHeight || ContChilds[y].offsetHeight || 0);
                ThisHeight > maxheight ? maxheight = ThisHeight :0;
            }
            for(y=0;y<ContChilds.length;y++){
                ContChilds[y].style.height = maxheight+'px';
            }
            ContDivs[i].style.height = maxheight+'px';
        }
    }
}
dann nurnoch den eltern div(s) class="RightHeight" geben und der eltern div und alle in ihm haben die groesst noetige groesse.
 
nunja, handys haben ja sowie so immer eine extra layout seite.
vondaher könnte man das ausschließen, aber die javascript funktion finde ich recht gut. sowas meinte ich, nur das einzige problem ist halt bei js das du vom benutzer verlangst js installiert zu haben. und alles was mit den wörtern "verlangen, webseite, benutzer" zu tun hat ist schlecht.

aber aufjedenfall eine bessere variante als das mit css.
man könnte ja es so gestalten das wenn man js aktiv hat es richtig angezeigt wird und wenn es deaktiviert ist man den nutzer drauf hinweist das die seite nur richtig angezeigt wird mit js.

:) denke Dawen hat jetzt genug lösungsansetze, um sein problem erfolgreich zu lösen.

lg und danke ronco für die funktion (notepad öffne -> strg + c)
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben