Home/ Questions/Q 6856785
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T01:55:47+00:00

im in the process of building a slider and i have a problem with

  • 0

im in the process of building a slider and i have a problem with the styling ,

I have 3 layers of divs ,

  1. First div to set the width and height of the slider
  2. second div to be container of the content , on this div i do all the action
  3. Content divs

First there is a live example with the code : http://jsbin.com/efuyix/8/edit#javascript,html,live

Or here :

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  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);
}
</script>
<style type="text/css">
  #slider {
    overflow: hidden;
    width: 50px;
    height: 50px;
  }
  #container {
    min-width: 100px;
    height: 50px;
    float:left;
   }
  .content {
    width: 50px;
    height: 50px;
    float:left;
   }
</style>

</head>
 
<body>
 <div id="slider">
  <div id="container" onclick="animate(this)">
    <div class="content" style="background-color:blue;"></div>
    <div class="content" style="background-color:pink;"></div>
    <div style="clear:both;"></div>
  </div>
</div>
</body>
</html>

So , what is the problem?

the width of the Container div must be big enough to contain all the Content divs perfectly ,

for example if i have 3 divs of Content inside the Container , i need the Container to be at least set with 150px width (because the Content div width is 50px) else it will be messing up and line break

If the Container is not big enough , the Contents divs will line break and all the slider will be messed up , must to know is that i don’t know how many Content divs will be print into the Container div , so the Container div must contain all of them without line breaking and somehow to be dynamic

how can i fix it? thank you in advance!!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    On .content, replace float: left with display: inline-block.

    Then, add white-space: nowrap to #container.

    • 0