CSS Forum

**JustAGuy** · 07:56 PM

I am playing with a new project and I thought I had a pretty good handle on moving text around.

Anyway, with this new project, for some reason I can't get the content text to move to the left a bit. From the pic below, you can see what I have to start with.

What I would like to have is something like the pic below:

The content text will go under <div id="mid">. I have tried Margin-Left: XXpx;
and I have tried padding-left: XXpx; and neither seem to want to move the text to the left.

I have done some reading up on the both and they seem to do the same thing. Maybe my old brain just isn't getting it, but I would appreicate it if someone could maybe explain the difference between the two (if there is any) and when to use Margin vs Padding.

Anyway, my code thus far is:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta name="robots" content="all">
    <meta name="rating" content="general">
    <style type="text/css">
body
{
  background-color:#000;
  margin:0;
  padding:0;
}
#container {
    width:973px;
    margin:0 auto;
	height:900px;
 }
#header {
  background-image:url('../images/header1.jpg');
  background-repeat: no-repeat;
  width:973px;
  height: 264px;
 }
#header2 {
 background-image:url('../images/header2.jpg');
  background-repeat: no-repeat;
  width:973px;
  height: 59px;
 }
#left {
 padding-top: 3.0em;
 background-color: #FFF;
 float:left;
 height:600px;
 width:197px;
}
#mid {
 background-image:url('../images/mid.jpg');
 background-repeat:repeat;
 color: #FFF;
 padding-top: 2em;
 margin-left: 175px;
 width: 775px;
 height: 600px;
 margin:0;
 float:left;
}
#fill {
 background-image:url('../images/fill.jpg');
 background-repeat: repeat;
 width: 973px;
 height:550px;
}
#foot {
  background-image:url('../images/foot.jpg');
  color: #FFF;
  width: 973px;
  height: 41px;
}
div.menu {
    width:185px;
    padding: 0.9px;
	margin-top: 0.7em;
	margin-left:0.5em;
    border:0px;
	text-align:left;
}
div.menu a {
    display:block;
	font-size:20px;
	width:100%;
    padding: 0.30em;
	margin-left: 0.3em;
    font-weight:bold;
    border-top:1px ;
    color: rgb(109,85,165);
    text-decoration:none;
	line-height:25px;
}
html>body div.menu a {width: auto;}
div.menu a:hover {
color: #000;
font-size:20px;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<div id="container" />
	<div id="header">
	</div>
	<div id="header2">
	<div id="left">
		<div class="menu">
    <a href="..">Home</a>
    <a href="..">Archives</a>
    <a href="..">Junk</a>
	<a href="..">Junk</a>
	<a href="..">TBD</a>
	<a href="..">TBD</a>
	<a href="..">TBD</a>	
	<a href="..">Contact Us</a>
</div>
</div>
<div id="mid">
<!--[if IE]>
<br>
<![endif]-->
<p>This is a test to see if this things work</p>
</div>
<div id="foot">
	</div>
</body>
</html>

Thanks for any help,
Vance

**chrishirst** · 10-21-2008, 01:58 PM

margins apply to the outside of a container.

padding applies to the inside of the container

**LadynRed** · 10-21-2008, 02:38 PM

You also need to be careful with this:

Quote:

float: left;
margin-left: 175px

You have it on #mid and that combination will cause IE6 to DOUBLE that left margin, known as the doubled-float margin bug.
http://www.positioniseverything.net/...ed-margin.html

To push the paragraphs away from the edge try this:

Quote:

#mid p{
margin-left: 20px;
}

**vangogh** · 10-21-2008, 07:58 PM

One other thing I notice is whule you have margin-left: 175px on div#mid, a little below that you also have margin:0. Since the margin:0 comes after it's overriding the margin-left: 175px.