html - left v/s margin-left and CSS: position -


i playing around make html/css carousel.

html:

<body>     <div id="container">         <div id="wrapper">             <div id="d1" class="box"><p>div#1</p></div>             <div id="d2" class="box"><p>div#2</p></div>             <div id="d3" class="box"><p>div#3</p></div>             <div id="d4" class="box"><p>div#4</p></div>         </div>     </div> </body> 

css:

.box {     height: 100px;     width: 100px;     margin: 15px;     border: 2px solid black;     color: black;     float: left; }  #container {     width: 150px;     height: 144px;     overflow: hidden;     border: 2px solid black; }  #wrapper {     height: 140px;     width: 555px;     border: 2px solid green;     position: relative;     left: 0px; }  #d1 {     background-color: blue; }  #d2 {     background-color: red; }  #d3 {     background-color: green; }  #d4 {     background-color: yellow; } 

here's fiddle: http://jsfiddle.net/97jhb/.
intend add javascript controls , provisions left/right buttons later.
first, want learn conceptually how works.

i trying carousel 'effect' playing wrapper's left.
if go on decreasing wrapper's left, able see boxes successively.

i have couple of questions:

  1. if don't set wrapper's position relative, changes made it's left not take effect. why so? isn't wrapper supposed relative default?

  2. if play around wrapper's margin-left instead of left, seems work desired.
    better between these 2 approaches: playing left or playing margin-left?

when assign position:relative css declaration div, you're not moving space takes on page, displayed.

however default position static html element if not specified explicitly.

position: static; 

check out link on complete explanation of margin-left v/s left difference

difference between margin-left , left


Comments

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

.htaccess - Matching full URL in RewriteCond -