Margin working for wrong div

Discussion in 'HTML & Website Design' started by Igozorus, Apr 25, 2013.

0
  1. #1
    Hello.i have this code
    <div id="outer">

    <div id="wrapper">

    <div id="logo">
    <img src="images/images.jpeg" alt="jpg" />
    </div>
    </div>
    </div>
    (Of course it's not the whole code,i just wrote part where problem is)
    And then in css i have:
    body { background-color:#9B37FF;
    }

    #outer { width: 995px; margin: 0 auto; background-color:#FFF;
    }

    #wrapper { width: 955px; margin: 0 auto;
    background-color:#FFF;
    }

    #logo { margin:30px 0px;
    So.margin should affect the #logo but it affects #outer.There is no margin at the top and bottom of logo,but instead margin appears outside the whole wrapper.Why is that?
     
    Igozorus, Apr 25, 2013 IP
  2. frankmust

    frankmust Member

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    28
    #2
    { margin:30px 0px; ...?

    .. whats next? you sould set it at position:relative so your logo can be set inside of the "wrapper" from that logo div..
    and why just dont style your img without div like so : <img src="images/images.jpeg" alt="jpg" style="margin:30px;" />

    ;)
     
    frankmust, Apr 25, 2013 IP
  3. Igozorus

    Igozorus Greenhorn

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #3
    I do it by example.In example everything's okay,and in my first site this type of code was working good,i just cannot understand what is wrong now
     
    Igozorus, Apr 25, 2013 IP
  4. frankmust

    frankmust Member

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    28
    #4
    with the exemple code you provided, i can only tell you that theres missing position setting to the logo div also the size specification is required
     
    frankmust, Apr 25, 2013 IP
  5. Igozorus

    Igozorus Greenhorn

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #5
    Allright,here's the full code
    <html>

    <head>
    <title>Sample site</title>
    <link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
    </head>

    <body>

    <div id="outer">

    <div id="wrapper">

    <div id="logo">
    <img src="images/images.jpeg" alt="jpg" />
    </div>

    <div id="navigation">
    <ul>
    <li>HOME</li>
    <li>ABOUT</li>
    <li>STRANGE STUFF</li>
    <li>CONTACT</li>
    </ul>
    </div>

    <div id="banner">
    <img src="images/banner1_2.jpg" alt="strange banner" />
    </div>

    <div id="content">
    <h1>Welcome</h1>
    <p>Some text.</p>
    </div>

    <div id="footer">
    <p>2013</p>
    </div>
    </div>
    </div>

    </body>
    </html>

    All css in my first post
     
    Igozorus, Apr 25, 2013 IP
  6. frankmust

    frankmust Member

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    28
    #6
    ok pls try this:
    css:
    #logo {margin:30px;position:relative;width: logo width here ex 200px;height: ex 300px;}

    with that code, your img will be 30px margin to the 4 side, if you only want it to be 30px margin from top and bottom and be centered just us this:

    #logo {margin-top:30px;margin-bottom:30px;margin-left:auto;margin-right:auto;left:0px;right:0px;position:relative;width:200px;height:300px;}

    remember to replace the logo size
     
    Last edited: Apr 25, 2013
    frankmust, Apr 25, 2013 IP
  7. creativewebmaster

    creativewebmaster Active Member

    Messages:
    654
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    78
    #7
    just add the float:left in the #logo ID.
     
    creativewebmaster, Apr 26, 2013 IP
  8. Igozorus

    Igozorus Greenhorn

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #8
    Well,i know how to fix it myself,float:left or just padding works,but it shouldn't be like that,just margin in #logo should work,it should not affect the wrapper,so i thought maybe someone will see where is the mistake.Anyway,thanks for trying to help
     
    Igozorus, Apr 26, 2013 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #9
    It's called margin collapse. Use padding instead, or set the parent to overflow:hidden; (and use a haslayout trigger for legacy IE if you care). Without a float or overflow state margins "collapse" to outside the parent element.

    Generally though this is why I avoid stating margins as much as possible.

    Though there are other issues - no doctype, endless DIV most likely for nothing (like the one around the menu UL), I'm pretty sure all the subsections on the page are NOT going to be subsections "Welcome", paragraph in the footer for what's probably NOT going to be a grammatical paragraph, crappy fixed width layout that's not even 1024 friendly, etc, etc, etc... You've barely got any markup and it's already bloated, non-semantic and loaded with accessibility issues.
     
    deathshadow, Apr 30, 2013 IP