Margin-right not working

**begood321** · 01-29-2013 06:58 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>

**tracknut** · 01-29-2013 02:52 PM

I'm not seeing the margin-right failing, it looks fine to me. You might want to put some background-color on the various divs so you can see them better. Or better yet, grab the Firebug add-on for Firefox for debugging.

As far as the image, you've got two things going on. First your HR right below it has top & bottom margins which create some space. Then also you want to set the img tag to display:block to avoid a small margin on the bottom of it.

Dave

Thread: Margin-right not working

Thread Tools

Display

Margin-right not working

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions