I'm now up for a new website and a problem occured (again).

I have a wrapper. Inside that I have two divs, both floated to the left. Under those two divs I wanna have another div but that div dosen't start under those two, instead it begins at the wrappers top, so when I put like 20px margin top on that div called "banner" (Yeah, the div id is ="banner") the margin begins at the wrapper's top. I want it to margin at the two divs. (Sorry for bad explanation, hope you understand, else ask me whats not understandable)

My html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styles.css"rel="stylesheet" type="text/css">
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

<body onload="MM_preloadImages('images/youtuberoll.png','images/Twitter.png','images/logorollover.png')">

<div id="wrapper">

<div id="logodiv">

  <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/logorollover.png',1)"><img class="logotyp" src="images/lOGO.png" name="Image7" width="410" height="60" border="0" id="Image7" /></a></div>

<div id="socialdiv">


<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/Facebook.png',0)"><img src="images/facebook black.png" name="Image6" width="64" height="60" border="0" id="Image6" /></a></li>

<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/Twitter.png',1)"><img src="images/twitter black.png" name="Image5" width="64" height="60" border="0" id="Image5" /></a></li>

<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/youtuberoll.png',1)"><img src="images/Youtube.png" name="Image4" width="64" height="60" border="0" id="Image4" /></a></li>



<div id="banner">



My css code:

body {background-color:#FFF }

#wrapper {width:800px; margin-left:auto; margin-top:30px; margin-right:auto; height:500px; }

#logodiv {float:left; height:75px; }

#socialdiv {float:left; width:340px; height:75px; }

#socialdiv ul { margin-top:10px;  }

#socialdiv ul li {list-style-type:none; display:inline;  float:right;}

.logotyp {margin-top:10px; margin-left:30px;  }
#banner {width:800px; height:300px; margin-top:20px; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
body {
	line-height: 1;
ol, ul {
	list-style: none;
blockquote, q {
	quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
table {
	border-collapse: collapse;
	border-spacing: 0;