How can I make my CSS update consistently? [closed]


Tags: javascript,jquery,css

Problem :

When I click on a button my layout falls apart. When I click on a button the CSS breaks apart my layout. How do I update my CSS to layout my divs properly?

$(document).ready(function(e) {
  totalCount = 100;
  for (var i = 0; i < totalCount; i++) {
    var newDiv = document.createElement("div");
    newDiv.innerHTML = "Number " + i;
    var applyClass = "bgColor"; //Identify the class
    document.getElementById("mainContainer").appendChild(newDiv);
    newDiv.id = "div" + i;
    document.getElementById(newDiv.id).className = applyClass;
    $('#div' + i).click(callbackFunction());
  }

  function callbackFunction(e) {
    return function() {
      //Remove all instances of css
      for (var i = 0; i < totalCount; i++) {
        $("#div" + i).removeClass('newColor');
      }
      document.getElementById(this.id).classList.add('newColor');
    }
  }
});
div {
  background-color: #ff0;
  padding: 2px;
  font-size: 12px;
  float: left;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 30px;
  padding: 5px;
  cursor: pointer;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out
}
.newColor {
  background-color: #00ffff;
  font-size: 16px;
  margin-left: 6px;
  margin-right: 6px;
  margin-top: 28px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body id="mainContainer">

</body>



Solution :

You can achive this by removing

 float

and making your div like this.

 div {
        background-color: #ff0;
        padding:2px;
        font-size:12px;
        word-wrap: break-word;//this one too. incase the word becomes too long.
        display: inline-block;//this one has been added.
        margin-left: 2px;
        margin-right: 2px;
        margin-top: 30px;
        width:auto;
        padding: 5px;
        cursor:pointer;
        -webkit-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out
    } 

    CSS Howto..

    How to fix a 3x3 block of images with CSS

    How do I access HTML elements created by a function? The elements are “undefined” and therefore not CSS apply-able

    How to make an item to appear for a short time (Either Javascript or CSS) [closed]

    How can you separate the navigation bar list from the body list?

    How change the background colour of the kendo ui datepicker using css [duplicate]

    How to design a comment box similar to facebook using only CSS?

    Mobile Toggle Menu - How to Push Content outside the view of the viewport?

    How to center text horizontally and vertically within box element? [duplicate]

    How to build this layout with CSS?

    GTK+ 3 CSS: How to specify text alignment for a label?

    How to shift a background image with css

    How to modify the font family within bootstrap

    How can I use CSS, Javascript, or a Cookie to disable animation reply on back button?

    how to add css file to node js(not express) code

    How to change css position left to right using jquery?

    How to select the first paragraph in a div with a specific class (CSS 2)

    how to change html content text

    using css

    how to make unorder list all in same block and have gap within each link (CSS)

    How to get image url in css inside a public folder in Rails?

    How page turn effect work in turn.js

    How do I format an angular drop down menu?

    How to change dropdown submenu second level background?​

    How to <%= link_to %> entire area of
  • in Ruby on Rails
  • How to change css background color dynamically in php using color from database

    How to to make a gap between rows in FlowPanel in Css in Gwt?

    How to use bootstrap grid system overlaying a map

    How to make div to match image height with CSS

    How to override Inline Style CSS?

    Having problems implementing a jQuery photo slideshow

    How to call the event of one element in another element in JQuery