I'm facing difficulty positioning the container above my header. Here is an example of what I am aiming for:
No matter what I attempt, strange occurrences like the NAV disappearing or divs overlapping keep happening.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Metrieken</title>
<meta name="keywords" content="ICT, Projecten, Consultancy" />
<meta name="description" content="Uw software projecten in control." />
<link href="http://fonts.googleapis.com/css?family=Varela" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1>
<a href="#"><img src="css/img/Logo-PMS.png" width="300px"></a>
</h1>
</div>
<div id="menu">
<ul>
<li class="current_page_item">
<a href="#" accesskey="1" title="">Diensten</a>
</li>
<li>
<a href="#" accesskey="2" title="">Toepassingen</a>
</li>
<li>
<a href="#" accesskey="3" title="">Dashboard</a>
</li>
<li>
<a href="#" accesskey="4" title="">Publicaties</a>
</li>
<li>
<a href="#" accesskey="5" title="">Nieuws</a>
</li>
<li>
<a href="#" accesskey="6" title="">Over ons</a>
</li>
<li>
<a href="#" accesskey="7" title="">Contact</a>
</li>
</ul>
</div>
</div>
</div>
<div id="banner">
<div class="title">
<h2>Uw software projecten in control.</h2>
<span class="byline">Voor al uw ICT-projecten</span>
</div>
</div>
<div id="extra" class="container">
<div id="tab">
<p>Diensten</p>
</div>
<div id="content">
<div class="title">
<h2>Vanaf nu kunt u kosten besparen op software ontwikkeling</h2>
</div>
<p>U vindt bij ons een compleet aanbod aan dienstverlening en toepassingen van software metrieken waarmee u kosten kunt besparen
op uw software ontwikkeling. Wij ondersteunen u met sizing / FPA en begroting en planning van software projecten. Ook helpen
wij u bij de inkoop van software door offertes voor software-ontwikkeling te beoordelen. Voor al onze vormen van dienstverlening
hanteren wij scherpe tarieven. Onderstaand schema geeft een overzicht van ons dienstenpakket.</p>
<img src="css/img/schema-homepage-5.jpg"
width="100%">
</div>
<div id="content">
<div class="title">
<h2>Kortom: U heeft uw software projecten in control!</h2>
</div>
<p>Metrieken.nl bestaat uit ervaren specialisten op het gebied van software metrieken: senior sizing analisten en senior consultants.
Wij werken voor uiteenlopende sectoren vanuit meerdere plaatsen in het land. Metrieken.nl ondersteunt bedrijven bij hun software
projecten met functiepuntanalyses en begroten en plannen van deze projecten. Daarmee kunnen onze klanten zich met een gerust
hart richten op hun primaire business, want de software projecten zijn in control. Openheid, transparantie en respect Metrieken.nl
vindt het belangrijk dat klanten tevreden zijn, niet alleen over de kwaliteit, maar ook over de prijs-kwaliteit verhouding
van onze dienstverlening en de mentaliteit van onze mensen. Openheid, transparantie en wederzijds respect zijn daarbij onze
kernwaardes.
<br>
<br>Ervaren en onafhankelijk:
<br>-gecertificeerde senior sizing analysts en senior consultants
<br>-ruime ervaring bij uiteenlopende sectoren
<br>-landelijk de meeste ervaring in huis
<br>-geen softwareleverancier, dus onafhankelijk.
<br>
</p>
</div>
<div id="three-column">
<div class="boxA">
<div class="box">
<p>Parlementair onderzoek naar ICT-projecten bij de overheid.</p>
<img src="css/img/noun_22592_cc.png" width="100%;">
<p>Met het ICT-dashboard meer grip op uw projecten.</p>
</div>
</div>
<div class="boxB">
<div class="box">
<p>Bekijk onze bedrijfs-presentatie</p>
<img src="css/img/noun_3059_cc.png" width="100%;">
<img src="css/img/noun_1541.png" width="20%;">
</div>
</div>
<div class="boxC">
<div class="box">
<p>Beste prijs/kwaliteit verhouding</p>
<img src="css/img/noun_30373_cc.png" width="100%;">
<p>Gecertificeerde en ervaren consultants én 25% onder de marktprijs</p>
</div>
</div>
</div>
</div>
<div id="page" class="container"></div>
</div>
<div id="copyright" class="container">
<div id="four-column">
<div class="box1">
<p>Diensten:
<br>-Early sizing
<br>-Sizing / FPA
<br>-Estimating
<br>-Monitoring
<br>-Benchmarking
<br>-Resource planning
<br>
</p>
</div>
<div class="box2">
<p>Toepassingen:
<br>-Agile
<br>-Project planning
<br>-Beheer
<br>-Inkoop van software
<br>-Leverancier / offerte
<br>
</p>
</div>
<div class="box3">
<p>Toepassingen:
<br>-Agile
<br>-Project planning
<br>-Beheer
<br>-Inkoop van software
<br>-Leverancier / offerte
<br>
</p>
</div>
<div class="box4">
<p>Toepassingen:
<br>-Agile
<br>-Project planning
<br>-Beheer
<br>-Inkoop van software
<br>-Leverancier / offerte
<br>
</p>
</div>
</div>
<p>© Untitled. All rights reserved. | Photos by
<a href="http://fotogrph.com/">Fotogrph</a>| Design by
<a href="http://templated.co" rel="nofollow">TEMPLATED</a>.</p>
</div>
</body>
</html>
CSS:
// Custom CSS styles go here...