2 Column Layout

boxxiebabee · 06/24/2012, 02:48

Servus, hab nen "kleines" Problem.

Und zwar es geht darum das ich 2 Divs nebeinander platziert hab (float). Nun möchte ich aber das der rechte Div den restlichen Platz einnimmt.
Das wäre ja bist jetzt noch kein Problem, wenn denn der linke Div eine vordefinierte Weite hätte, die hat er leider nicht da dort die Menü-Einträge reinkommen und somit ist die Weite vom Div dynamisch. Ansonsten könnte man ja mit Margin arbeiten.

Das ganze sollte mit CSS2 gelöst sein (JS wäre in dem Fall ja wie Cheaten

).

Hat ja jemand ne Idee? Steh grad ziemlich am Schlauch. :\

~~FancyArts~~ · 06/24/2012, 14:03

Kannst du uns nicht ein paar Schnipsel zeigen...?
Außerdem verstehe ich nicht genau, was du willst...

Also es soll so aussehen...

Spoiler

Und wo hast du das Problem, bzw. was passiert?

DeepBlocky · 06/24/2012, 16:08

Dass der Text recht eben die ganzen 100 % ausfüllen soll, und da nicht immer eine Lücke sein soll

Das ist das Problem

~~FancyArts~~ · 06/24/2012, 22:17

Mach es doch als "container"...
Also so :

PHP Code:


			
.content .container {
    width: xxpx;
    height: xxpx;
    float: left;
    margin-top: xxpx;
    margin-left: xxpx;
}

Und genau du hast gemeint, dass ich kein CSS oder ähnliches kann... aber na ja, ist ja nun auch egal.

PseudoPsycho · 06/24/2012, 22:18

Wow, das ist wirklich schwer...
Das gelingt nichtmal mir auf die Art

Ich würde höchstens die Aufgabenstellung verändern und letztlich sowas draus machen:

HTML Code:

<!Doctype html>
<html lang="de">
	<head><title>Test</title></head>
	<body>
		<div style="width:100%; background:rgb(260, 0, 0); display:table;">
			<div style="display:table-row; width:100%;">
				<div style="background:rgb(0, 260, 0); display:table-cell;">bla</div>
				<div style="background:rgb(0, 0, 260); display:table-cell;">xyz</div>
				<div style="clear:both;"></div>
			</div>
		</div>
	</body>
</html>

Quote:

Originally Posted by FancyArts

PHP Code:

.content .container { width: xxpx; height: xxpx; float: left; margin-top: xxpx; margin-left: xxpx; }

Ähm, wieso schreibst du nur "xx", wenn genau danach gefragt ist?? :O

boxxiebabee · 06/25/2012, 00:15

@Pseudo

Hey, so weit war ich auch schon mit display: table-cell etc. nur da kann ma ndann kein margin etc. verwenden, sondern nur border-spacing was nicht so toll ist.

Also hier nochmal nen Beispielbild was ich erreichen möchte:

Hoffe ihr versteht es, und es gibt ne Lösung dafür (ohne JS). Hab zwar schon recht lange gegoogelt aber leider nix gefunden.

~~FancyArts~~ · 06/25/2012, 15:03

Mhh... soll der Text den Container voll ausfüllen, oder der Conateiner die restlichen 100% der Seite einnehmen?

Doch sowas?

PHP Code:


			
.content {
    width: 800px;
    height: 330px;
    padding: xxpx xxpx xxpx xxpx; (z.B. : 20, 40, 20, 40)
}

.content .container {
    width: 800px;
    height: 350px;
}

.content .container #home {
    float: left;
    margin-top: xxpx;
    margin-left: xxpx;
}