[html,css] 2 Spalten per Div gleich groß

Bububoomt

Bububoomt

ohne Vertrauen
ID: 10361
L
28 April 2006
19.666
769
Also ich habe rum probier, und es irgendwie nciht geschafft. Wie bekommt man es hin, das beide divs gleich groß sind. Also wenn die eine spalte durch text länger wird, soll sich die andere auch anpassen an die größe. Wie bei tabellen.

im grunde ging es mir darum, das beide einen weißen hintergrund zusammen bilden, der über dem schwarzen body-hintergrund liegt. Aber trotz eines divs der um die beiden divs war hat das nciht geklappt.

dachte die kosntruktion:
<div><div></div><div></div></div>

sollte den gewünschten effekt haben, weil sich das äßerste div anpasst an das längste innere. Aber irgendwie klappte es nicht.

Beispiel
partylions.de/div/index.html
 
Zuletzt bearbeitet:
geht nicht.

Also sobald ich in beiden (inneren) divs float:left habe, bleibt es weis.

partylions.de/div/index.html
 
Entweder du musst das float auch clearen (<br style="clear:both;" />), damit der Hintergrund angezeigt wird. Oder du machst es gleich so:

HTML: 
<body style="color:green;">
<div style="background-color:black; width:150px;">

<div style="width:50px; position:relative;">sss<br><br><br>ssss<br><br><br>sss</div>

<div style="width:100px; position:absolute; top:10px; left:50%;">CONTENT</div>
<br style="clear:left;">
</div>
</body>
Ich hoffe, es ist so gewünscht.

Die von XadreS angesprochene Lösung ist absolut daneben... In strikter Schreibweise gibt es das nicht einmal als Attribut ;)
 
Zman schrieb:
Die von XadreS angesprochene Lösung ist absolut daneben... In strikter Schreibweise gibt es das nicht einmal als Attribut ;)
Zum Vergrößern anklicken....

ja war auch nur der erst spontane gedanke ohne mir großartig gedanken machen zu müssen. hab gerade auch keine testmöglichkeiten.
 
hmm, da ist es nur links schwarz

partylions.de/div/index2.html

also es soll halt generell irgendwo einsetzbar sein, also nur das man die breite etc. abändert. Geht halt nur darum, das man zwei spalten irgendwo hat und beide gleich groß sind.

so als wenn ich irgendwo mitten im design folgendes habe

HTML: 
<table><tr><td>links</td><td>content</td></tr></table>


dort sind dann aj auch beide gleich, nur table ist ja net so das wahre dafür.
 
Ich weiß zwar nicht wie intelligent die neueren Browserversionen sind, aber z.B. der IE 5.0 kann das height-Argument nicht richtig umsetzen. ;)
 
Bei dir hat der zweite Div-Container auch left:50% statt wie ich angegeben hatte left:50px dadurch rutscht es natürlich aus dem schwarzen Bereich heraus, da ich die Breite auf 150px des äußeren Containers gelegt hab ;)
 
Also mit JS könnte man so etwas machen.
Wenn du deinen Div Container IDs gibt, z.B. Div1 und Div2 dann lautet der JS Code:
HTML: 
<script type="text/javascript">
// Hoehe
var height1 = document.getElementById('Div1').offsetHeight;
var height2 = document.getElementById('Div1').offsetHeight;

if(height1 > height2)
  document.getElementById('Div2').offsetHeight = height1 ;
elseif(height2 > height1)
  document.getElementById('Div1').offsetHeight = height2 ;

// Breite
var width1 = document.getElementById('Div1').offsetWidth;
var width2 = document.getElementById('Div1').offsetWidth;

if(width1 > width2)
  document.getElementById('Div2').offsetWidth = width1;
elseif(width2 > width1)
  document.getElementById('Div1').offsetWidth = width2;
</script>

Ich weiß nun nicht ob es auch noch einen andere Möglichkeit gibt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben