Margin-right not working

begood321 · 01-29-2013, 06:28 AM

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>

sunfighter · 01-29-2013, 03:44 PM

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>

jerry62704 · 01-29-2013, 04:41 PM

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.