asked on

margin problem

hi
maybe i have stopped thinking but i do not get what is wrong.

i have a div id= containet
and inside that div a div class= initialbox.

when i give margin-top to the initialbox it is the container that moves. i want to move the inner div and untouch the outer div.

best regards

level9wizard

This might be a sign of the 'containet' div (you mentioned) or it's parent having invalid styles - can you provide us some source code to look at? Below is a simple example that does exactly what you're asking for.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>example</title>
  <style type="text/css">
	div.Main{
		width:500px;

		border: 2px solid red;
	}
	#inner{
		border: 2px solid green;
		margin-top: 100px;
	}
  </style>
</head>

<body>

<div class="Main">
	<div id="inner">
		Hello World
	</div>	
</div>

</body>
</html>

Open in new window

derrida

ASKER

hi

i made a test myself so its very clean but still does not work fine.

i attach my code.

hope you can see what i am doing wrong.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">

        #container{
            width: 960px;
            height: 600px;
            background-color: wheat;
            
}

#container .initialbox{
    width: 300px;
    height: 300px;
    background-color: red;
    margin-top: 5em;
}

    </style>

  </head>
  <body>
    <div id="container">
        <div class="initialbox">this is the box</div>
    </div>
  </body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Jagadishwor Dulal

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

derrida

ASKER

hi

jagadishdulal obviously your code does work but it does not use the margin property, and that is my issue. i try to see WHY margin does not work.

it kills me but i cannot see why level9`s example does work and mine does not. level maybe you can explain?

best regards

kmead6

I believe it's because you have the margin applied to "#container .initialbox" instead of just ".initialbox". But applying padding to the parent box, like jagadishdulal did would be the better option anyway.

derrida

ASKER

hi its not the selector. i have tried all this. i will go with the outter div padding