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
    Sep 2012
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Margin-right not working

    Hi Guys,

    I can't understand why margin-right doesn't work even though my syntax appears correct in code below and margin-left works with same syntax. I want both left and right margins equal.

    Also I'm trying to get rid of space under image, which I can't see where space is created in code.

    Any ideas/help is greatly appreciated.
    Thanks

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    
    h1,h2,h3,p,p2 {font-family: Arial;}
    h1 {font-size:150%; margin:10px; color:#003399;}
    h2 {font-size:110%; margin:10px;}
    h3 {font-size:80%; margin:10px; color:red;}
    p {font-size:80%; margin:10px;}
    
    .container {width:600px; height:auto;
    margin-top:50px;
    margin-bottom:auto;
    margin-right:50px;
    margin-left:50px;
    border:1px solid #cccccc;
    background:#ffffff; 
    }
    div.img
      {
       border:0;
       text-align:center;
       }
    div.hr {
       border: 0;
       width: 100%;
    }
    table{ 
        margin: 10px;
        border: 0px solid #cccccc;
        width: 580px;
        border-spacing:0;
        border-collapse:collapse; /* 'cellspacing' equivalent */
    }
    table td
    {
        padding: 8px 8px;
    }
    td{ 
        border: 1px solid #cccccc;
        font-size:80%;
        font-family: Arial;
        cellpadding: 10px; /* 'cellpadding' equivalent */
    }
    
    </style>
    </head>
    
    <body>
    <div class="container">
    <div class="img"><img src="klematis_small.jpg"></div>
    <div class="hr"><hr /></div>
    
    <h1>Header1</h1>
    <h2>"Header2"</h2>
    <h3>* HEADER3 *</h3>
    <h3>Header3</h3>
    <p>Paragraph:</p>
    <table>
       <tr>
          <td width ="20%">Project</td>
          <td width ="80%">Name</td>
       </tr>
       <tr>
          <td width ="20%">Date</td>
          <td width ="80%">02/04/2013</td>
       </tr>
       <tr>
          <td width ="20%">Request</td>
          <td width ="80%"><a href="http://www.w3schools.com">testurl</a></td>
       </tr></table>
    
    <p>This is a paragraph.</p>
    <p>Expand on pararapgh.</br>
    <font size="3" color="#003399">TESTING COLOR</font></p>
    <p>TESTING</p>
     </div>
    
    </body>
    </html>
    Last edited by begood321; 01-29-2013 at 09:22 AM. Reason: mistake

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,721
    Thanks
    25
    Thanked 662 Times in 661 Posts
    Of course margin-right works, but not the way you think it does. You only have one and that's in the container div which is the main div, everything is inside of it. You can't control elements inside of it that way. If you float the container div to the right you will see the right margin, Right now there is nothing to the right of it close enough to show it.

    Try this:
    Code:
    <div class="hr" style='margin-top:-.8em' ><hr /></div>
    Last edited by sunfighter; 01-29-2013 at 04:51 PM.

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Your container does have a 50/50 margin. You just are not seeing it on the right because the page is much wider.

    You don't want to do what you did. You are using a table to position stuff on the page. That is not the purpose of tables. What you want to do is use CSS to position things.

    Here is a place you can go (for free) to learn CSS: http://www.w3schools.com/css/default.asp

    I can't see where the extra 5 px on the div that contains the image is coming from.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    Posting Permissions

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