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:
if don't set wrapper's
position
relative
, changes made it'sleft
not take effect. why so? isn't wrapper supposedrelative
default?if play around wrapper's
margin-left
instead ofleft
, seems work desired.
better between these 2 approaches: playingleft
or playingmargin-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
Comments
Post a Comment