CODEWITHSUNDEEP
htmlcsscss-float
Cyn
Cyn

Reputation: 63

I am trying to use float right on some text but it refuses to work

This is for a nodecg bundle, so excuse all the seemingly useless script tags

HTML

<body>
  <div class="main-list">
    <script>
      var type="donation";
      var user="TestUser";
      var amount="$1.00";
      document.write("<div class='list-element' class='" + type + "' >");
      document.write(user);
      document.write("<span class='pull-right'>" + amount + "</span>" + "</div>");
    </script>
  </div>
</body>

CSS

.main-list{
  margin: auto;
  width: 486px;
  color: #ecf0f1;
  font-size: 23px;
  background-color:#494949;
}
.list-element {
  list-style-type: none;
  padding-top: 9px;
  padding-left: 9px;
  height: 39px;
  border-top: 1px solid;
  rgba(125, 125, 125, .5);
  }
.pull-right: {
  float:right;
  margin-right:9px;
}

I know it is sloppy code and I could consolidate it into one document.write, but my issue is that I cannot get the pull-right class to move the amount to the right.

https://jsfiddle.net/b9pzofLx/1/

Upvotes: 3

Views: 88

Answers (1)

Lal
Lal

Reputation: 14810

See this fiddle

Notice .pull-right: { in your CSS

you have a : in your CSS for pull-right which was an error syntactically and thus the style was not getting applied. The correct CSS would be as follows

CSS

.pull-right {
  float:right;
  margin-right:9px;
}

Upvotes: 2

Related Questions