SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Divs, margin and styling

    Hello guys, I'm having a problem here..

    I'm having a wrapper with a width of 960pixel, in that wrapper I have a div called firstTopSection, with a width of 940px, and a height of 300pixel, and a margin on 300pixel, and background of white.

    Inside firstTopSection I have a div called canvasHolder, with a margin of 10 pixel, width of 920pixel, and a height of 280pixel.. Color of yellow..


    It should look like this:



    But looks like this



    My coding is following:

    HTML Code:
    <html>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    #wrapper {
    	width: 960px;
    	margin: 10px auto;
    	border-radius: 5px;
    	-webkit-border-radius: 5px;
    	background: green;
    	box-shadow: 0 2px 5px black;
    	-webkit-box-shadow: 0 2px 5px black;
    	-moz-box-shadow: 0 2px 5px black;
    	padding-bottom: 10px;
    }
    
    .firstTopSection {
    	width: 940px;
    	height: 300px;
    	margin: 10px;
    	background: white;
    }
    
    .canvasHolder {
    	margin: 10px;
    	width: 920px;
    	height: 280px;
    	background-color: #fae062;
    }
    </style>
    </head>
    <body>
    <section class="firstTopSection">
      <div class="canvasHolder">
         lorem ipsum
      </div>
    </section>
    </body>
    </html>
    I can't see what the problem is :S

    Can anybody help?

    Thank you!
    Best regards,

    Lucas

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    This is a case of collapsing margins.

    One way to deal with it is to remove one px from the top margin and instead put a 1px border at the top to keep the margins from collapsing:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    <style type="text/css">
    #wrapper {
      width: 960px;
      margin: 9px auto 10px;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      background: green;
      box-shadow: 0 2px 5px black;
      -webkit-box-shadow: 0 2px 5px black;
      -moz-box-shadow: 0 2px 5px black;
      padding-bottom: 10px;
      border-top: 1px solid green;
    }
    
    .firstTopSection {
      width: 940px;
      height: 300px;
      margin: 9px 10px 10px;
      background: white;
      border-top: 1px solid white;
    }
    
    .canvasHolder {
      margin: 10px;
      width: 920px;
      height: 280px;
      background-color: #fae062;
    }
    
    section {display: block;}
    </style>
    </head>
    <body>
    <div id="wrapper">
    <section class="firstTopSection">
      <div class="canvasHolder">
         lorem ipsum
      </div>
    </section>
    </div>
    </body>
    </html>
    Don't forget to include a doctype. Also, this is a CSS topic, so thread moved to that forum.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice! Thank you very much Ralph.m!

    You just took away my 3 hours headache!

    But I must say, it's weird it does like that, somehow, it should work 'normal'..

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Collapsing margins are a pain at times as it seems more often than not you don't want them to collapse. However once you understand how (and why) they work the way they do then you can cater for them quite easily.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    If you want, say, 1em margin above and below your paragraphs, I like the way the top and bottom margins of each paragraph merge with those of the next. It would be a hassle if the space between paras doubled. So there are advantages.

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I can see something handy in the collapsing, but there should be a like "margin-collapse: none" property or something,

    But yes indeed, I understand why it's like that I think..

    You have a div that is 200x200 pixel, and a div inside that is 180x180 pixel, with a 10pixel margin.. Margin is giving space outside the box to the next "element" the next element is "taken" up by the margin, so it take it's parents "outline of the margin", because it's the closest "item" where you really have something that isn't a margin lol..

    Confusing, but I think it's something like that..

    But the margin-collapse:none" would be awesome


Tags for this Thread

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
  •