2 div einander ausrichten

[vollcom]

Hallo, habe ein Problem.
ich habe 2 divs nebeneinander, die sollen sich einander in der höhe ausrichten, also wenn div1 500px hat soll div2 auch 500 px haben und umgekehrt genauso.
Geht das überhaupt?

CSS vom div 1 :

.pageborhack{
height:1%;
overflow:hidden;
padding:20px 20px 98px 20px;
margin-top:10px;
float:left;
width:700px;
border: #000 1px solid;
background: url(images/page.gif) #ffff66 repeat-x top ;
}

Css vom DiV 2:

#menu {
float:right;
width:195px;
padding-bottom:7px;
text-align:left;
margin:0px;
}

kann mir jemand helfen ? wäre sehr dankbar

 

[prm]

Ein Fall für Faux Columns

 

[neuroleptika]

.pageborhack{
height:1%;
overflow:hidden;
padding:20px 20px 98px 20px;
..
}

Für mich sieht das aus wie ein mißverstandener display: table; Ersatz für IE5-7 (Gleich lange Spalten).
Meine Google-Suche zu pageborhack hat fast nur japanische Treffer und einenen Foreneintrag auf französisch gebracht (exakt das selbe css).
Ich verstehe weder japanisch noch französisch.
Wie kommt mann auf sowas ohne zu wissen was es ist?

Der Trick könnte ein abgeschnittenes padding durch overflow: hidden sein. Wie das in dem Beispiel funktionieren soll weiß ich nicht.
Das height: 1% soll vielleicht nur Layout im IE5-6 hervorrufen, was durch width: 700px überflüssig wäre.

So könnte es auch für moderne Browser aussehen:
html

<div id="alles">
<div id="links" class="spalten">
Gleich lange Spalten<br />Umbruch<br />Umbruch
</div>
<div id="rechts" class="spalten">
Einzeiler
</div>
</div>

css

#alles {
width: 80%;
margin: 0 auto;
overflow:hidden;
border: #000 1px solid;
}

.spalten{
padding-bottom:400px;
[COLOR="DarkRed"][B]margin-bottom: -400px;[/B][/COLOR]
float: left;
width: 50%;
}


#links {
background-color: gray;
}

#rechts {
background-color: darkred;
}

Für die meißten Fälle sollte prms Beispiel geeigneter sein.
Dein Codeschnipsel ist unbrauchbar und für Einsteiger (vermutlich) auch sonst nicht zu empfehlen.

Genug geraten -
Wo hast du das her?

 

[vollcom]

Hi, Danke erstmal für die Antworten, das css ist aus einem Wordpress Theme. daher das japanische bei google :)
Die erste Antwort ist ganz logisch für mich, nur habe ich einen senkrechten Verlauf mit schwarzen Border, also geht das leider nicht. Schade eigendlich. gibt es keine andere möglichkeit???

 

[neuroleptika]

Zeige doch mal die eine Grafik wie du es dir vorstellst.

 

[vollcom]

pm ist raus ... schau mal bitte

 

[neuroleptika]

Du kannst hier auch Bilder einbinden oder auf eine url verweisen.

 

[vollcom]

Hi, so ich habe die Grafik bissel übertrieben :)
also ich habe im .left einen senkrechten verlauf und im .pageborhack (menu ist transparent)
und die Border die ich hier mit gemalt habe hätte ich auch gerne so wie sie sind. Ich möchte halt, das .pageborhack und .menu immer gleich sind ...

 

[neuroleptika]

Dafür brauchst du mindestens so ein Gerüst:

<div id="alles">
<div id="innen">
<div id="spalten">
<div id="spalte1">
<div id="spalte2">
</div>
</div>
</div>
</div>
</div>

Vielleicht sind die Elemente in deinem Wordpress Theme schon enthalten.

 

[vollcom]

Also, der .left container wird von einem gesamten container gehalten.

<div id="alles"> = warp container
<div id="innen"> = left container
<div id="spalten"> = pageborhack container
<div id="spalte1"> = menu container
<div id="spalte2"> = gibts nicht :)
</div>
</div>
</div>
</div>
</div>

 

[neuroleptika]

Ich würde gerne wissen was es mit .pageborhack auf sich hat.
Zeigst du mal das Theme?