CSS: dynamic width div

Question

I'm coding a slider and I have problems with the stylying of the container.

I have 3 div:

A div that sets the width and height of the slider
A container div with all the content divs (and the scroll for the slider)
Many divthat show different contents each

What I want to do is apply a negative margin on the second div to slide the content.

LIVE example: http://jsbin.com/efuyix/7/edit

JS:

  function animate(element) {
  var start = new Date();
  var id = setInterval(function() {
    var timePassed = new Date() - start;
    var progress = timePassed / 600;
    if (progress > 1) progress = 1;
    element.style.marginLeft = -50 * Math.pow(progress, 5)+"px";
    if (progress == 1) {
      clearInterval(id);
    }
  }, 10);
}

CSS

  .example_path {
    overflow: hidden;
    width: 50px;
    height: 50px;
  }
  .example_block {
    min-width: 100px;
    height: 50px;
    float:left;
   }
  .example_in_block {
    width: 50px;
    height: 50px;
    float:left;
   }

HTML

<div class="example_path">
  <div class="example_block" onclick="animate(this)">
    <div class="example_in_block" style="background-color:blue;"></div>
    <div class="example_in_block" style="background-color:pink;"></div>
    <div style="clear:both;"></div>
  </div>
</div>

The problem: The width of .example_block has to be exactly the same or more than (amount of content divs .example_block * 50 [width size of content div] ) to work.

For example, if I set the width size of the .example_block to 90, the pink div will be below the blue div and not beside it.

I want the container div to be dynamic so I don't have to set the specific width size.

How can I do this?

Please briefly tell ehat you want to do with the div's (as in how you want it to be dynamic - are you gonna change the width by javascript of both div's?) — Suraj
– Suraj, Commented Nov 16, 2011 at 10:16
@tunetosuraj you can see how it's dont in the live example i gave in the top of the topic , i want to change the container margin to negative margin — homerun
– homerun, Commented Nov 16, 2011 at 10:19

Willem Mulder · Accepted Answer · 2011-11-16 12:16:44Z

1

Simply remove the float:left in the .example_block.

See http://jsbin.com/efuyix/9/edit

answered Nov 16, 2011 at 12:16

Willem Mulder

14.1k4 gold badges42 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matthew · Accepted Answer · 2011-11-23 12:29:52Z

0

Not with negative margins. You can probably set padding on one of the outer DIVs.

Also, min-width isn't going to be backwards compatible with older versions of IE.

Check this example: http://jsfiddle.net/5xBYN/6/

If the initial positioning is good, you can then use negative values on your container DIV (the third DIV) for top, left, right or bottom to achieve sliding.

Update:

Maybe this is closer to what you want. http://jsfiddle.net/5xBYN/7/

I'm still not sure what you are trying to do. Maybe edit the fiddle I posted and update your question with what I'm getting wrong if there is anything.

edited Nov 23, 2011 at 12:29

answered Nov 16, 2011 at 10:18

Matthew

8,47610 gold badges41 silver badges67 bronze badges

1 Comment

homerun Over a year ago

the second div is the container (example_block class)

Collectives™ on Stack Overflow

CSS: dynamic width div

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related