CSS restbreite ausnutzen

[adrian2005]

Hi Leute,
ich habe folgendes Problem:
Ich habe 2 Divs nebeneinander gesetzt
Innerhalb des ersten DIV habe ich weitere Divs nebeneinander gesetzt und benötige clear: both;

das 1. Div ist 804px breit und das 2.Div soll die restliche breite ausfüllen somit wäre die Breite 100%-804px; leider kann css mit width: 100%-804px nichts anfangen. ich kann das 2. div nur mit float: right; neben das 1. setzen aber es liegt damit am rechten Rand an. Was kann ich machen damit es am linken DIV anliegt und die restliche breite annimt?

Linkes DIV:

.main {
    float:left;
    width:804px;
    padding-top:0px;
    padding-bottom:0px;
    padding-left:0px;
}

Rechtes DIV:

 .right {
    padding:0px;    
    margin:0px;
    float:right;
    width: auto;
    overflow: hidden;
    }

 

[NE4Y]

bin mir nicht sicher ( noch nie ausprobiert) aber müsste es nicht mit

width: % bzw width: * gehen

? ( wie gesagt nicht sicher nur ne Idee)

 

[alogheo]

@NE4Y: geht aba net

 

[adrian2005]

Habt ihr noch andere ideen? :S

 

[Space Vampire]

In dem was du uns zeigst ist die ursache deines geschilderten problemes nicht zu finden.
ich hab deine beschreibung der umstände mal vereinfacht nachgestellt und es funktioniert.

guckst du hier: Test

vielleicht hilft dir das weiter.
wenn nicht, zeig uns doch mal den gesamten quellcode oder noch besser einen link zur betreffenden seite!

.main {
	width:804px;
	background-color:red;
	float:left;
}

.innen1 {
	background-color:yellow;
	float:left;
	margin:5px;
}

.innen2 {
	background-color:orange;
	float:right;
	margin:5px;
}

.right {
	background-color: green;
	margin-left:814px;
}

.clear_rl {
	clear:both;
	background-color:blue;
}

<div class="main">
	<p>Linkes DIV mit 804px breite</p>
	<div class="innen1">
		<p>Ein inneres DIV. Links gefloatet</p>
	</div>
	<div class="innen2">
		</p>Noch ein inneres DIV. Rechts gefloatet</p>
	</div>
	<div class="clear_rl">Clearendes DIV</div>
</div>
<div class="right">
	<p>Rechtes DIV mit Restbreite</p>
</div>

 

[adrian2005]

Hier ist mal der Link: http://simplexcms.de/hv/

 

[Space Vampire]

Bei deiner Anordnung KANN right nicht neben main floaten.
wie in meinem beispiel kommen im quelltext erst die float-elemente.
darunter die elemente die die floats umfließen sollen.
schau dir mein beispiel mal genauer an

 

[adrian2005]

Ich sehe den fehler nicht kann mir jemand auf die sprünge helfen?

 

[threadi]

Du musst auf die Reihenfolge der Elemente im HTML-Code achten. Zuerst die floatenden-Elemente, danach die nicht floatenden Elemente die aber von den floats umgeben sein sollen.

 

[Space Vampire]

Da war der Threadi schneller.
Aber um das noch etwas auf deinen Fall zu präzisieren:
Dein DIV mit der Class .right soll dein DIV mit der Class .main umfließen.
Das kann es bei der aktuellen Codereihenfolge nicht.
Dein DIV .main kommt erst nach deinem DIV .right.
Es muss aber andersherhum sein.
Elemente mit der CSS-Eigenschaft float müssen immer vor den sie umfließenden Elementen im Quellcode stehen

 

[adrian2005]

aber andersrum gehts auch nicht xDD ich hatte es ja vorher so, aber da hat sich right unter main geschoben

 

[threadi]

Andersrum? Was hast Du geschrieben? Zeig die Quellcodes bitte damit man dir helfen kann.

 

[adrian2005]

Klick hier

 

[Space Vampire]

Jetzt hast du einen clear zwischen .main und .right!

 

[adrian2005]

ja aber das brauch ich doch um die divs in main nebeneinander zu bekommen ...

 

[Space Vampire]

Du has da ne ziemliche DIV-Suppe produziert!
Mehrere falsch, doppelt oder garnicht geschlossene Container.
Und du floatest .right immer noch. Ich hatte bereits bei meiner ersten Antwort geschrieben, dass du das nicht floaten darfst, wenn du die volle restbreite haben willst.
Schau mal hier:
Unbenanntes Dokument
Ich hab das mal ein wenig aufgeräumt.
Das Rote, das du da siehst, ist dein .right
Schau dir im Qoelltext an, mit welchen Eigenschaften ich dein CSS für diese Class überschrieben habe.
Nur mit .blue_right konnte ich nichts anfangen.
Ich hoffe, das hilft dir jetzt erst mal weiter.

 

[adrian2005]

JAAA danke