Search code examples
javascriptcsshtmlalignment

CSS rules for alignment in separate HTML5

html {
  font-family: "Open Sans", sans-serif;
  font-weight: 100;
  background-color: #fbfbfb;
}

body {
  font-family: "Open Sans", sans-serif;
  font-weight: 100;
}

body h1 {
  font-weight: 100;
}

body h3 {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
}

.widget-container {
  width: 100%;
  position: fixed;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -47%);
}

.widget-title {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}

.widget-Gtitle {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 13px;
}

.kpi-container {
  list-style-type: none;
  margin: auto;
  border-spacing: 10px 1px;
  text-align: right;
}

.kpi-entry {
  text-align: center;
  margin-bottom: 10px;
}

.kpi-value {
  font-size: 16px;
  text-align: right;
}

.kpi-Gvalue {
  font-size: 13px;
  text-align: right;
}

.kpi-Glabel {
  font-size: 13px;
  text-align: right;
}

.kpi-label {
  font-size: 16px;
  text-align: right;
}

.kpi-icon {
  display: inline-block;
  width: 13px;
  height: 13px;
}

.green {
  background: #009c00;
}

.red {
  background: #ff0000;
}

.amber {
  background: #FFC200;
}

.arrowGreen {
  fill: #009c00;
  width: 15px;
  height: 15px;
}

.arrowRed {
  fill: #ff0000;
  width: 15px;
  height: 15px;
}
<html>

<head>

</head>

  <ol id="error-list" class="error-list"></ol>
  <div id="widget-title" class="widget-Gtitle">EBIT Margin %</div>
  <div id="widget-container" class="widget-container">
    <table class="kpi-container">
      <tbody>
        <tr class="kpi-entry">
          <td>
            <div class="kpi-Glabel">Current</div>
          </td>
          <td>
            <div id="ragCurrentBox"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" class="kpi-icon arrowGreen">
<g>
	<g>
		<path id="svgInternalID" d="M446.906,261.969c-1.792-3.656-5.5-5.969-9.573-5.969h-96V10.667C341.333,4.771,336.563,0,330.667,0H181.333    c-5.896,0-10.667,4.771-10.667,10.667V256h-96c-4.073,0-7.781,2.313-9.573,5.969c-1.792,3.646-1.354,8,1.135,11.219    l181.333,234.667c2.021,2.615,5.135,4.146,8.438,4.146s6.417-1.531,8.438-4.146l181.333-234.667    C448.26,269.969,448.698,265.615,446.906,261.969z"></path>
	</g>
</g>
</svg></div>
          </td>

          <td>
            <div id="valueCurrent" class="kpi-Gvalue">0.58%</div>
          </td>
        </tr>
        <tr class="kpi-entry">
          <td>
            <div class="kpi-Glabel">YTD</div>
          </td>
          <td>
            <div id="ragYTDBox"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" class="kpi-icon arrowGreen">
<g>
	<g>
		<path id="svgInternalID" d="M446.906,261.969c-1.792-3.656-5.5-5.969-9.573-5.969h-96V10.667C341.333,4.771,336.563,0,330.667,0H181.333    c-5.896,0-10.667,4.771-10.667,10.667V256h-96c-4.073,0-7.781,2.313-9.573,5.969c-1.792,3.646-1.354,8,1.135,11.219    l181.333,234.667c2.021,2.615,5.135,4.146,8.438,4.146s6.417-1.531,8.438-4.146l181.333-234.667    C448.26,269.969,448.698,265.615,446.906,261.969z"></path>
	</g>
</g>

</svg></div>
          </td>
          <td>
            <div id="valueYTD" class="kpi-Gvalue">0.57%</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

I am having an issue with two html5 widgets on the same page. The alignment is off as you can see on both widgets for the subtitles Current and YTD. enter image description here

Could anyone shed some light on this please, here are the CSS rules, they are both the same as they come from same css file. I would like the titles and arrows to line up perfectly even if the right units are a different length e.g 1 and £x.xx. enter image description here

Solution

  • Did you try changing it to: display:inline;