Hi.
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">
<head>
<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];}
}
</script>
</head>
<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">
<ul>
<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>
</ul>
</div>
<div id="banner">
</div>
</div>
</body>
</html>
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;
}
/Kevin
