2 <div>'s nebeneinander platzieren

[anonymus]

Hallo,
gibt's eine einfache Möglichkeit,
zwei div's nebeinander zu platzieren, die auch in allen "gängigen" Browsern
funktioniert?

Bsp:

|----|------------------------------|
|Bla |Hallo asdfasdfalsdfjasldfjalsd|
|    |alsdjfalsdjflasdjflasdjflsdf  |
|----|------------------------------|

Najo, als Ansatz hab ich folgendes, was allerdings nur im IE funktioniert:

.all
{
height:1px;
}

.leftBox
{
background-color:blue;
float:left;
height: 100%;
}

.rightBox
{
background-color:red;
height:100%;
}

<div class="all">

    <div class="leftBox">
    Halo Welt
    </div>

    <div class="rightBox">
    Bla Bla Bla Basdlfkjasödlf ajsödf lajsdölf kjasfaklsjdf öklajlkasdjf 
    ölsakdfj    asdjf asjdf    asjfdas fdjasdfjas jflaksdf öalsdkfj askldfj as    
    dfj asföalsdkfj aösldkfj alfkasd     fa     sdf          sad     fasd     f 
    asd    asdf    asdf    asdf    a    sdfasdlf kjaösdlkjf asd    f sdafj    
    asdf alsdjaösdf     asdjf a    #sdfasdf asdf
    </div>

</div>

Wie gesagt: IE macht's richtig.

Opera:
erwartet in der Klasse .all eine passende Höhenangabe, die ich aber
leider nicht habe, da das ganze Scriptgeneriert wird.

Firefox:
lässt den Text vom rechten Block unterhalb von "Bla" weiterfließen,
ausser man klopft bei Klasse ".leftBox" eine Höhenangabe rein, die
ich leider auch nicht habe...

Najo, evtl. ließe sich noch was mit
display: table, table-row usw
hinbiegen.
Wäre aber momentan recht viel Aufwand, das ganze umzuschreiben.

Wenns was einfacheres gäbe, wär ich ganz froh drum.

Danke schon mal.
Martin

[MORL]

Also beim "floaten" wären Breitenangaben nicht schlecht und ein Beenden des floatings is auch nicht verkehrt...

div.leftBox {
 width:100px;
 float:left;
 background-color:blue;
}
div.rightBox {
 width:200px;
 float:left;
 background-color:red;
}
div.clearLeft {
 height:1px;
 clear:left;
 font-size:1px;
}
...
<div class="all">
 <div class="leftBox">asdsdaf</div>
 <div class="rightBox">sadfsdafas</div>
 <div class="clearLeft">&nbsp;</div>
</div>

[anonymus]

Danke für die Antwort.

Leider brauchen Firefox und Opera immer noch eine Höhenangabe.

Najo, dann hilft alles nix.
Muss ich Tabellen reinbauen

[MORL]

Geht nicht gibts nicht. Wenn man immer gleich die Flinte ins Korn wirft dann erziehlt man nie eine akzeptable Lösung ;).
Das Opera und Mozilla den Code nicht ordnungsgemäß darstellen wage ich zu bezweifeln. Poste doch mal ein bissel von deinem jetzigen Code. Vielleicht lässt sich ja noch was machen, denn Tabellen sind keine Lösung...

[anonymus]

Code: deine Klassen mit meinem HTML-Code

Fast, hab noch a bissl in den Klassen rumgepfuscht.
(mal mit, mal ohne Höhenangaben, usw.)

Wenn man's genau nimmt, machen Opera und Firefox genau das, was man bei
einem float:left erwartet: Element steht links und wird rechts vom Text
umflossen. Wenn das linke Element aus ist, geht's drunter weiter

Firefox/Opera:

|-----|----------------------------------|
| Bla |Hallo afajaöslfkj asklfjalfkjas   |
|----- alsdfjalsdfjasldfkjasdlfkalsdkfjal|
|lasdkjflasdjflkajsdflasdkjflasdjflasdjlf|
|----------------------------------------|

Somit macht's der IE falsch.
Nur ist es halt genau das, was ich brauch...
Bloss genaugenommen entspricht das nicht einem float:left, sondern
eher einer Tabelle.
Leider...

IE:

|----|------------------------------|
|Bla |Hallo asdfasdfalsdfjasldfjalsd|
|    |alsdjfalsdjflasdjflasdjflsdf  |
|    |asdlfkjalsdkjfalsdkjflaskdjfal|
|----|------------------------------|

Drum glaub ich inzwischen, dass es nicht anders machbar ist, als mit Tabellen...

thx
Martin

[MORL]

Also bei mir funktioniert das problemlos im IE, Firefox und Opera...
Schau mal hier

[energyzer]

Vielleicht will er das beide div's gleich hoch sind Weil das habe
ich bei dynamischer Höhe auch noch nicht hinbekommen (z.B. rechts Site-Inhalt
und links Navigation, die aber genauso hoch sein soll wie der Text). Bisher
hab ich mir dann immer mit Tricks geholfen, wie eine links ausgerichtete
Hintergrund-Grafik und passendem padding

[MORL]

Ach so...
Das ändert natürlich einiges und wird sich sicher nur duch gut durchdachte Verschachtelungen erreichen lassen, wenn überhaupt...

[anonymus]

aaaarrrrgggghhh,

etz weiss ich, was ich übersehen hab:

rightBox braucht auch noch ein "float:left"...

Fettes MERCI an euch alle
Martin