Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2009
    Location
    Rizal Province, Philippines
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ODD margin setup?

    i have a DIV section on my page with id="containertop"
    i have also a DIV id="containertitle" INSIDE the "containertop" div

    the css of the containertop is

    Code:
    #containertop {
         bgcolor: #CCCCCC;
         margin:0px;
         width:483px;
         height:48px;
    }
    the css of the containertitle is

    Code:
    #containertitle {
         margin:20px 0px 0px 20px;
    }
    what i want is for the containertitle's top and left margin inside the containertop to be 20px and the rest is 0px.

    the output of the left margin seems working
    but the top margin, which i set for the containertitle applies also to the parent DIV which is the containertop.

    so the result is the text inside the containertitle is 20px away from the left edge on the containertop, which is what i want, BUT the containertitle's text is placed on top even if i set the top margin 20px away from the containertop's edge.

    my html is

    Code:
    <div id="containertop">
        <div id="containertitle">
                REAL ESTATE MORTGAGE LOAN
        </div>
    </div>
    how can i make it so that the text "REAL ESTATE MORTGAGE LOAN" will have it's margin 20px top and left from it's container(containertop)?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello doctrin13th,
    That is a classic example of uncollapsing margins.

    See if the following works for you, I've added some background colors to make it easier to see where the different elements are -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
    <style type="text/css">
    body{background:#fc6;}
    #containertop {
         background: #CCCCCC; /*no selector bgcolor in CSS*/
         margin: 0px;
         width: 483px;
         height: 48px;
    	 overflow: auto;
    }
    #containertitle {
         margin: 20px 0px 0px 20px;
    	 background: #f00;
    }
    </style>
    </head>
    
    <body>
    <div id="containertop">
        <div id="containertitle">
                REAL ESTATE MORTGAGE LOAN
        </div>
    </div>
    </body>
    </html>
    Last edited by Excavator; 11-20-2009 at 03:06 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Oct 2009
    Location
    Rizal Province, Philippines
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sir EXCAVATOR thank you! that's what I need to learn. By the way, the html/body margin works on Firefox but it seems not to work on IE


  •  

    Posting Permissions

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