williamrouse Posted September 3, 2011 Report Share Posted 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> Quote Link to comment Share on other sites More sharing options...
williamrouse Posted September 3, 2011 Author Report Share Posted September 3, 2011 I found my error in this line: margin: auto 2px auto; Should be just: margin: 2px auto 0; Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.