My div starts in my wrapper problem


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" "">
<html xmlns="">
<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;


2 things I need to explain.

1 thing (and the main issue) is that the #banner needs a clear:both; to stop snagging with the two floated items.

Another issue is that the <ul> menu you have in one of the floated divs needs to contain the floated <li>. Basically just give overflow:hidden; to that <ul>. If you want to read up on more options, check here.

Thanks man, but a problem still occurs.
There is a unwanted space under those two divs and the banner and when I margin the banner it dosent start underneath the divs.

Can we have the real site online? The code you provided above isn’t enough to replicate this issue (and it’s also impossible to see anything because we can’t see hte images :))

By the way. I changed the div name from banner to content. (View source in browser)

The css:

body {background-image:url(../images/lol.jpg) }

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

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

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

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

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

.logotyp {margin-top:10px; margin-left:30px;    }
#banner {width:800px; height:200px; clear:both; }

#upper {width:800px; margin-left:auto; margin-right:auto; height:10px; background-color:#FFFF66 }

#jag {float:right; margin-top:30px; }

#content {width:800px; height:200px; clear:both; margin-top:50px;}

You will find that when your two divs are contained within a parent then the margins will not collapse on block elements in the normal flow. This would hold true for just using a wrapper. That is why they are so commonly used.

Here is a quote from the W3C :slight_smile:

W3C - An element that has had clearance applied to it never collapses its top margin with its parent block’s bottom margin.

In short I believe that is saying when elements are within the same parent then collapsing margin rules go into effect.

Try wrapping a nelement around the logo div and the social div. Give that overflow:hidden; to contain the floats. The top magin will work then :).

Thanks Ryan once again! :slight_smile:

You’re welcome! :slight_smile: