CSS position problems

williamrouse · September 3, 2011

In the code below, I don't know/understand why the <div> that has the id='slideShowBoxControlls' is not positioned under the <div> that has the id='slideShowBox', since they have the same basic CSS.

Can someone explain this to me?

<!DOCTYPE html>
<html>
<head>
   	<title>Practice jQuery slider and gallery</title>
   	<style>
       	html, body{
           	width: 100%;
           	height: 100%;
           	margin: 0 auto;
           	font-family: 'PT Sans Narrow', Arial, sans-serif;
           	font-size:12px;
           	background-color: #DEDEDE;
           	color: red;
       	}

       	#header{
           	margin: 0 auto;
           	width: 860px;
           	height: 95px;
           	background-color: #FAF6FA;
           	background: #ffffff;
       	}

       	#container{
           	position: absolute;
           	top: 0px;
           	left: 80px;
           	width: 885px;
           	height: 970px;
           	background-color: #EFEFEF;
           	border-style:solid;
           	border-width:1px;
           	border-color: silver;
       	}

       	#slideShowBox{
           	position: relative;
           	width: 640px;
           	height: 500px;
           	margin: 150px auto 0;
           	background-color: #F5F5F5;
           	border:1px solid #FFFFFF;

           	-moz-box-shadow:0 0 22px #111;
           	-webkit-box-shadow:0 0 22px #111;
           	box-shadow:0 0 22px #111;
       	}
       	#slideShowBoxControlls{
           	position: relative;
           	width: 640px;
           	height: 34px;
           	margin: auto 2px auto;
           	border: 1px solid red;
       	}

       	#arrowLeft{
           	background: url('cssimages/arrowLeft.png') no-repeat;
           	width: 32px;
           	height: 32px;
           	border: 1px solid green;
           	display: inline-block;
           	float: left;
       	}

       	#arrowRight{
           	background: url('cssimages/arrowRight.png') no-repeat;
           	width: 32px;
           	height: 32px;
           	border: 1px solid green;
           	display: inline-block;
           	float: right;
       	}

       	h1{
           	font: 30px "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
           	text-align: center;
           	padding-top: 10px;
       	}
   	</style>
</head>
<body>
   	<div id="container">
       	<div id="header">
           	<h1>Practice jQuery Slider and Gallery</h1>
       	</div>
       	<div id="slideShowBox">

       	</div>
       	<div id="slideShowBoxControlls">
           	<div id="arrowLeft"></div>
           	<div id="arrowRight"></div>
       	</div>
   	</div>
</body>
</html>

williamrouse · September 3, 2011

I found my error in this line:

margin: auto 2px auto;

Should be just:

margin: 2px auto 0;

Sign In

CSS position problems

Recommended Posts

williamrouse

williamrouse

Join the conversation

Browse

Activity

Store

Support