0

I am creating an arcade game with JavaScript and jQuery. In this game, I need to align the level, score and high score in the same line.

My HTML structure looks like this

<div class="game-info">
  <p id="level">
    <span id="score"></span>
    <span id="high-score"></span>
  </p>
</div>

For the CSS, I want to provide some breathing room, between the paragraph and the two spans. Span elements are by nature inline elements so they should be able to be on the same line.

#score, #high-score {
  margin-left: 10%;
  font-weight: bold;
}

Here is the JavaScript code I have

$("#level").html("<strong>Level: </strong>" + level + 
"<span id='score'>Score: " + score + "</span><span id='high-score'> High Score: " + 
highScore() + "</span>");

As you can see, I have clearly wrapped everything in span elements.

I'd like it to look like this

Level: 1         Score: 4      High Score: 16

However, it has some crazy effects.

It will start out with the value for high score on it's own line. And after 5 or 6 correct answers in a row, it will line up on the correct line. Later, if you score more than 10, it will drop back to a new line.

Here's the fiddle

https://jsfiddle.net/mypkktu7/1/

I do not understand this weird behavior.

Is there anything I can do to fix it? Something like using a min-width property?

Richard Hamilton
  • 25,478
  • 10
  • 60
  • 87
  • Can't you simplify the demo down to a minimal representation of the problem? Not easy to inspect css while having to play a game that removes those elements – charlietfl Jan 15 '16 at 19:11
  • And we should have to stop to figure out how that works. No. An [MVCE](http://stackoverflow.com/help/mcve) is more appropriate and not unreasonable to ask for – charlietfl Jan 15 '16 at 19:37

2 Answers2

2

add a white-space: nowrap;

to your paragraph tag css and you'll be good.

Css

#level {
  white-space: nowrap;
}

white-space has a hyphen in between to break the words

Community
  • 1
  • 1
mhodges
  • 10,938
  • 2
  • 28
  • 46
0

Try

.game-info {
  position: fixed;
  width: 100%;
}

P.S. : It's a fun game :)

Yug Kapoor
  • 785
  • 5
  • 10
  • This is acceptable as well if you want the div to cover the full width – mhodges Jan 15 '16 at 19:16
  • Interesting. I thought that `p` elements by default, as block level elements took up the entire width – Richard Hamilton Jan 15 '16 at 19:34
  • 1
    The parent element has a fixed position. The problem with using "fixed" positioning is that it takes the element out of flow. [Source](http://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container) – Yug Kapoor Jan 15 '16 at 19:39