CODEWITHSUNDEEP
htmlcss
anujit
anujit

Reputation: 99

left v/s margin-left and CSS: position

I am playing around to make an 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 the fiddle: http://jsfiddle.net/97jhB/.
I intend to add javascript controls and provisions for left/right buttons later.
First, I just want to learn conceptually how it works.

I am trying to get the carousel 'effect' by playing with the wrapper's left.
If I go on decreasing the wrapper's left, I will be able to see the boxes successively.

I have a couple of questions:

  1. If I don't set the wrapper's position to relative, changes made to it's left do not take effect. Why is that so? Isn't the wrapper supposed to be relative by default?

  2. If I play around with the wrapper's margin-left instead of left, it seems to work as desired.
    What is better between these two approaches: playing with left or playing with margin-left?

Upvotes: 3

Views: 292

Answers (3)

Alex W
Alex W

Reputation: 38193

Because only relative, absolute and fixed positioning use left, right, top, and bottom to define their locations relative to the current context they are in.

Fixed is relative to the viewport, absolute is taken out of the normal page flow and relative to the first parent with a CSS position set on it, and relative is just relative to the nearest block-level ancestor.

static is the default position and uses margin-left, margin-right, etc to position the element relative to other elements in the page flow, within the nearest block-level ancestor.

Also, be aware that position:fixed does not work as expected on older mobile devices.

MDN has great documentation on this subject.

Upvotes: 4

AnaMaria
AnaMaria

Reputation: 3621

When you assign the position:relative CSS declaration to a div, you're not actually moving the space it takes up on the page, just where it is displayed.

However the default position is static for any html element if not specified explicitly.

position: static;

Check out this link on SO for a very complete explanation of the margin-left v/s left difference

Difference between margin-left and left

Upvotes: 0

Nabil Kadimi
Nabil Kadimi

Reputation: 10394

  1. Static is the default, and the best thing to do is to have the wrapper relative and the items absolute, this way overflowing items won't go to the bottom (~ won't create new lines)... You'll have to remove float:left if you want to follow this path.

  2. It's probably better to use left (or right if RTL), what if you want some margin between that your carousel slides, think of the scenario where you have more than one visible item.

Upvotes: 0

Related Questions