SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    My div starts in my wrapper problem

    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:

    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:

    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

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.











    Quote Originally Posted by RyanReese View Post
    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.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 )
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    http://www.kwpwebdesign.se/

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

    The css:

    Code:
    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;}

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan once again!

    Quote Originally Posted by RyanReese View Post
    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


    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 .

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome!
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •