Simples Layout - 2 Div Boxen nebeneinander

[Axor]

Ich hab da eine Frage zu einem relativ einfachen Layout:

<div style="background:#FFA500; width:900px; margin:10px; height:500px;">
    <div style="background:#000000; width:25%; height:100%;">
    	links
    </div>
    <div style="background:#FF0000; width:75%; height:100%; float:right;">
    	rechts
    </div>
</div>

wieso kann ich nicht 2 div boxen mit 25% bzw. 75% nebeneinander darstellen - die rechte box rutscht immer runter.

für mein gewünschtes layout könnt ich auch die linke box fix definieren - aber wie kann ich die rechte box dann so breit machen wies die Auflösung des Betrachters zulässt?

Danke!
Freu mich auf Antworten!

 

[tobee]

Das linke Div braucht float: left

<div style="background:#FFA500; width:900px; margin:10px; height:500px;">
    <div style="background:#000000; width:25%; height:100%; float:left;">
    	links
    </div>
    <div style="background:#FF0000; width:75%; height:100%; float:right;">
    	rechts
    </div>
</div>

 

[Axor]

ok danke erstmal, eins hab ich bei meinem Beispielcode vergessen

wenn ich nun dem linken div als Trennung einen border-right: 2px solid #F29400; geb, klappts wieder nicht...

 

[Paspirgilis]

Als hintergrund information mal die Antwort warum das passiert ist was passiert ist:
Das "linke" div hatte sich den platz genommen über die ganze breite (so kann man sich das zum mindest vorstellen), wie es alle tuhen die nicht gefloatet sind und relative positioniert sind. Das "linke" div nimmt aber nur 25% des platzes ein was es sich nimmt.
Des wegen rutscht das right-gefloatete darunter.
2. Aufgepasst!
Wenn das parent div keine höhe hätte, hätte es eine höhe von 0px.
Weil die gefloateten divs "nicht zur höhe des parent divs zählen".

Weil das nun 25%+2px breit ist und damit 100% + 2px bräuchte, hat aber nur 100%.
Reine Mathematik.
Tipp:
Wenn du sowieso weist das es 900px sind dann gibs in px an:
Links: width: 223px;
border-right: 2px solid #F29400;
Rechts: width: 675px;

MFG
Mark Paspirgilis

 

[Axor]

Naja, so solls ja nicht werden.

Für meinen Fall brauch ich einfach 2 Spalten mit je 25% und 75% inkl. Abtrennung von 2px

Mit dem geposteten Code wollt ich nur das Problem darstellen.
Sagen wir das Div in dem die Spalten sind soll 90% breit sein, die 2 Divs darin eben mit 25/75 % + 2px Border dazwischen


Hab den Code nun entsprechend verändert + eine neue Frage:
Im rechten Teil möcht ich eine Fußzeile haben... wie bring ich diese ganz runter, wo sie hingehört?

<div style="background:#FFA500; width:90%; margin:10px; height:500px;">
    <div style="background:#000000; width:25%; height:100%; float:left; border-right:2px solid #000000;">
    	Inhalt links
    </div>
    <div style="background:#FF0000; width:75%; height:100%; float:right;">
    	Inhalt rechts
        <div style="background:#FFA000; bottom:0px; left:0px; width:100%; border-top:1px solid #000000;">
        Fußzeile
        </div>
    </div>
</div>

 

[Paspirgilis]

<div style="background:#FFA500; width:90%; margin:10px; height:500px;">
    <div style="background:#000000; width:25%; height:100%; float:left;">
    	Inhalt links
    </div>
    <div style="background:#FF0000; width:75%; height:100%; float:right;">
    	Inhalt rechts
        <div style="background:#FFA000; border-top:1px solid #000000;">
        Fußzeile
        </div>
    </div>
</div>

So müsste es doch gehen oder?

 

[Axor]

So müsste es doch gehen oder?

Die Fußzeile soll immer ganz unten sein - egal wieviel in der Box an Inhalt ist...

 

[Maik]

Hi,

positionier den rechten Block relativ, und die Fußzeile darin absolut:

<div style="background:#FFA500; width:900px; margin:10px; height:500px;">
    <div style="background:#000000; width:223px; height:100%; float:left; border-right:2px solid #000000;">
            Inhalt links
    </div>
    <div style="background:#FF0000; width:675px; height:100%; float:right; position:relative;">
            Inhalt rechts
        <div style="background:#FFA000; bottom:0px; left:0px; width:100%; border-top:1px solid #000000; position:absolute;">
        Fußzeile
        </div>
    </div>
</div>

Siehe auch Webmaster-FAQ -> CSS Wie richte ich eine Box am unteren Rand der Elternbox aus?

mfg Maik