Wie kann ich dieses Layout mit HTML und CSS umsetzen?

bogazci · #1 (**permalink**) 15.01.2015, 21:47

Hallo zusammen,

wie kann ich dieses Layout für IE9 und höher mit HTML und CSS umsetzen?

Gruß
Yavuz

Nitamud · #2 (**permalink**) 15.01.2015, 22:17

Hier mal ein Rohentwurf mit Flexbox:

HTML-Code:

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>

  <link rel="stylesheet" type="text/css" href="!Test.css" />
	
	<style>
	
	* {
	
		margin: 0;
		padding: 0;
	
	
	}
	
	header,footer,div.left,div.rest {
	
		background-color: blue;
		margin-bottom: 2px;
		
	
	
	}
	
	div.left {
	
		width: 100px;
		float: left;
	
	
	}
	
	div.rest {
	
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	
	background-color: green;
	
	
	}
	
	#wrapper {

		width: 100%;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
	
	}

	
	
	
	
	
	</style>
	
	
</head>

<body>	

	
  <header>Blabla</header>
	
	<div class="wrapper">
		<div class="left">Blub</div>
		<div class="rest">Lala</div>
	</div>
	
	<div class="wrapper">
		<div class="left">Lulu</div>
		<div class="rest">Blablub</div>
	</div>
	
	<footer></footer>
	
</body>

</html>

etux · #3 (**permalink**) 15.01.2015, 22:50

Zitat:

Zitat von Nitamud

Hier mal ein Rohentwurf mit Flexbox: ...

Solange sich der Inhalt auf jeweils nur eine Zeile beschränkt, könnte das (rein optisch gesehen) sogar funktionieren.

schatzi · #4 (**permalink**) 15.01.2015, 22:59

Hallo!

Der IE9 kennt aber noch kein Flexbox...
Daher vielleicht doch besser altbacken mit float und margin:

Edit fiddle - JSFiddle

etux · #5 (**permalink**) 15.01.2015, 23:55

Zitat:

Zitat von schatzi

... Daher vielleicht doch besser altbacken mit float und margin:

Besser ist es. Aber auch hier gilt meine Bemerkung vom Vorbeitrag.
„Wer floatet, muss auch ….“.

bogazci · #6 (**permalink**) 16.01.2015, 07:50

WOW. Super, vielen Dank!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
externe CSS Datei in HTML einbinden	simsam	CSS	5	15.03.2010 20:19
usemap splitten unter css UND html	thadan	CSS	1	06.01.2008 17:30
CSS in HTML - Hintergrundbild wird nicht angezeigt	fossy	CSS	7	11.10.2007 17:17
Hilfe bei gesamten CSS Layout	mexxat	CSS	0	22.08.2007 13:40
XML -> HTML mit CSS, erweiterbares layout	tk	CSS	0	29.11.2004 08:41