I am encountering an issue with 3 inline <div> elements where the one on the far left is not displaying the light blue background and black border that it should have.
HTML:
<!DOCTYPE html>
</html>
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<title></title>
</head>
<body>
<div class="inline" "id="clicker">
<br> Atoms: <span id="atoms">0</span>
<br>
<input type="image"
src="https://theatomandperiodictable.wikispaces.com/file/view/220px-
Stylised_Lithium_Atom.svg.png/297637780/220px-Stylised_Lithium_Atom.svg.png"
onClick="atomClick()" width="75%" height="75%">
</div>
<div class="inline" id="upgrades">
<b>upgrades</b>
<b>text</b>
</div>
<div class="inline" id="modifiers">
<button onClick="buyElement()" id="BuyElement">Buy
Element</button>
<br> Elements: <span id="elements">0</span>
</div>
<br class="clearBoth" />
<script type="text/javascript" src="index.js"></script>
</body>
</html>
CSS:
#clicker, #upgrades, #modifiers {
width: 33%;
height: 500px;
background-color: #09a1a8;
border-style: solid;
border-width: 2px;
border-color: #000;
text-align: center;
margin: 4px;
float: left;
}
#upgrades button {
width: 100px;
height: 20px;
margin: auto;
}
#upgrades text {
margin: auto;
}
#modifiers button {
width: 100px;
height: 20px;
margin: auto;
margin-top: 10px
}
body {
background-color: #1e1e1e;
}
div.inline { float:left; }
Needed additional text for demonstration purposes.