<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
<title>Zwei Spalten</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Um alte IE HTML5-tauglich zu machen -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
<style>
@media all {
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
width: 90%;
padding: 0;
margin: 1rem auto;
}
main {
padding: 1 rem;
}
main>* {
padding: 0 2rem;
}
main>:nth-child(1) {
border-right: 3px solid silver;
}
main>*>h2 {
color: blue;
}
main>* dt {
text-decoration: underline;
}
main>* dd {
margin-bottom: 0.6rem;
}
main {
display: flex;
}
main>* {
flex: 1;
}
}
</style>
</head>
<body>
<main>
<section>
<h2>Hauptfächer</h2>
<dl>
<dt>Betriebswirtschaftslehre</dt>
<dd>6 Arbeiten im Jahr</dd>
<dt>Deutsch</dt>
<dd>4 Arbeiten im Jahr</dd>
<dt>Englisch</dt>
<dd>4 Arbeiten im Jahr</dd>
<dt>Mathe</dt>
<dd>3 Arbeiten im Jahr</dd>
</dl>
</section>
<section>
<h2>Nebenfächer</h2>
<dl>
<dt>Büromanagement</dt>
<dd>2 Arbeiten im Jahr</dd>
<dt>Gesamtwirtschaft</dt>
<dd>2 Arbeiten im Jahr</dd>
<dt>Geschichte</dt>
<dd>2 Arbeiten im Jahr</dd>
<dt>IKT</dt>
<dd>2 Arbeiten im Jahr</dd>
<dt>Religion</dt>
<dd>2 Arbeiten im Jahr</dd>
<dt>Wirtschaftsinformatik</dt>
<dd>6 Arbeiten im Jahr. <br />Ihr arbeitet euch zu einem Programmierer an. Die ersten Schritte werdet ihr in EXCEL tätige. Danach kommen Datenbanken tran, wie sie überall zu finden sind wie z. B. bei Amazon. Falls ihr das abgearbeitet habt kommt HTML mit PHP. Und im zweiten Jahr witmet ihr euch nur noch den Programmieren.</dd>
</dl>
</section>
</main>
</body>
</html>