css für 2Spalten und 2 Zeilen

mad dog

mad dog

Aktives Mitglied
Thread Starter
Dabei seit
16.02.2006
Beiträge
161
Reaktionspunkte
3
Hallo,
ich versuche ein, wie ich meine simples css aus 2 Spalten und 2 Zeilen, zentriert zu erstellen (siehe Anhang). Ich bekomm's aber nicht hin und finde auch kein entsprechendes layout im web.
kann mir da einer von euch weiterhelfen ??
Vielleicht sollte ich noch erwähnen das ich sowiso wenig Plan von web desing habe...:eek:
Gruß
mad
 

Anhänge

  • css_2s_2z.jpg
    css_2s_2z.jpg
    6,3 KB · Aufrufe: 63
Feste oder variable Höhe/Breite für die einzelnen Zellen und das Gesammtpaket?
 
@dms,
es sollen alle Zellen eine feste Höhe/Breite Haben, und das Ganze (Container ?) soll zentriert im Browser erscheinen...
 
... frage mich langsam ob dies überhaupt möglich ist. Ich scheitere immer an zelle 3 bzw. 4. irgendwie wollen die unteren nicht nebeneinander...
 
So?

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
	<title>2&amp;2</title>
	<style type="text/css">
		#container {
			width: 750px;
			height: 550px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -275px 0 0 -375px;
		}
		
		#column-one {
			background: #0F0;
			float: left;
			width: 200px;
			height: 400px;
		}
		#column-two {
			background: #F00;
			width: 550px;
			height: 400px;
			margin-left: 200px;
		}
		
		#wrapper-bottom {
			clear: both;
		}
		#column-three {
			background: #FF0;
			float: left;
			width: 200px;
			height: 150px;
		}
		#column-four {
			background: #00F;
			width: 550px;
			height: 150px;
			margin-left: 200px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="wrapper-top">
			<div id="column-one"></div>
			<div id="column-two"></div>
		</div>
		<div id="wrapper-bottom">
			<div id="column-three"></div>
			<div id="column-four"></div>
		</div>
	</div>
</body>
</html>
 
Ich habe gerade keine Zeit Dir was zu basteln. vlt. kannst Du mit folgendem Ansatz was anfangen.

Hauptcontainer, feste Breite/Höhe. Zentrieren a la ...mal fix googeln... http://pmob.co.uk/pob/hoz-vert-center.htm

Die einzelnen Boxen haben: float:left und jeweils Ihre feste Höhe/Breite.

C'est tout.
 
@msslovi0
jo, genau so ! weniger ist oft mehr...
habe wohl vor lauter Bäumen den Wald nicht mehr gesehen und gecodet und gecodet und...
Thx
MAd
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten