You must Sign In to post a response.
  • Category: HTML

    Margin property error in CSS

    Hi following is my complete html.
    <html>
    <head>
    <style type="text/css">
    #div1{width:1000px;height:700px;border:1px solid blue;margin:0px auto;}
    #div2{width:200px;height:300px;border:1px solid blue; margin-right:10px; margin-top:10px;}
    </style>
    </head>

    <body>

    <div id="div1">

    <div id="div2">
    </div>
    </div>
    </body>
    </html>

    the problem is div2 has margin-right property of 10px.

    but it is not working.div2 still displays in left side.

    how to solve this

    Regards

    Baiju
  • #764260
    Hi Baiju,

    As per my understanding you want to display div2 inside div1 and you want to have left margin for div2 from div1 (div1 moves right side)
    If that is expected, then change

    #div2{width:200px;height:300px;border:1px solid blue; margin-right:10px; margin-top:10px;}

    to below
    #div2{width:200px;height:300px;border:1px solid blue; margin-left:20px; margin-top:10px;}

    this should help. (see attached with updated markup)

    Thanks,
    Murali.

    Regards,
    Muralidhar.

    test.html

    Delete Attachment

  • #764265
    Hai Baiju,
    As per the raw html, it works correctly. The issue is that you are making the fixed width for the inner div(div2) and due to that you cant see the effect of the margin-right.
    If you just remove the width, you can see the effect. Modify your html as below to see the margin:

    <html>
    <head>
    <style type="text/css">
    #div1{width:1000px;height:700px;border:1px solid blue;margin:0px auto;}
    #div2{height:300px;border:1px solid blue; margin-right:10px; margin-top:10px;}
    </style>
    </head>
    <body>
    <div id="div1">
    <div id="div2">
    </div>
    </div>
    </body>
    </html>

    Hope it will be helpful to you.

    Regards,
    Pawan Awasthi(DNS MVM)
    +91 8123489140 (whatsApp), +60 14365 1476(Malaysia)
    pawansoftit@gmail.com

  • #764279
    Just remove the width from both divs.

    A div is a block level element and will use all available space (unless you start floating or positioning them) so the outer div will automatically be 100% wide and the inner div will use all remaining space after setting the left margin.

    Thanks
    Koolprasd2003
    Editor, DotNetSpider MVM
    Microsoft MVP 2014 [ASP.NET/IIS]

  • #765734
    Hi Please find the corrected code below

    <code>
    <html>
    <head>
    <style type="text/css">
    #div1{width:1000px;height:700px;border:1px solid blue;margin:0px auto;}
    #div2{border:1px solid blue; margin:10px; height:680px;}
    </style>
    </head>

    <body>

    <div id="div1">

    <div id="div2">
    </div>
    </div>
    </body>
    </html> </code>


Sign In to post your comments