Having trouble with Vertical Alignment of Text and Rotated Text

Question

I am trying to create a simple Bar Chart, but having huge problems with the CSS. And yes, I have banged my head against D3 for a while but gave up and decided to create my own. Here is my code:

Note that it is extracted from a larger page where this is contained within a single div but I have put it into a separate page for SO.

 #B2Card { height: 340px; padding: 0; padding-bottom: 5px; } #B2CardLeft { position: absolute; height: inherit; float: left; width: 10%; text-align: right; } #B2CardRight { float: right; width: 90%; height: inherit; } #BarChart { float: left; height: 75%; width: 100%; border-left: 2px solid white; border-bottom: 2px solid white; text-align: left; } #BarChartXAxis { float: left; height: 25%; width: 100%; background-color: #0FC; } .verticaltext { position: absolute; transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); bottom: -85%; color: #fff; } 

 <div id="B2Card"> <div id="B2CardLeft"> <p class="YAxis">60</p> <p class="YAxis">50</p> <p class="YAxis">40</p> <p class="YAxis">30</p> <p class="YAxis">20</p> <p class="YAxis">10</p> </div> <div id="B2CardRight"> <div id="BarChart"></div> <div id="BarChartXAxis"> <p class="verticaltext" style="left:32%;">2017-10-10</p> <p class="verticaltext" style="left:33%;">2017-10-11</p> <p class="verticaltext" style="left:34%;">2017-10-12</p> <p class="verticaltext" style="left:35%;">2017-10-13</p> <p class="verticaltext" style="left:36%;">2017-10-14</p> </div> </div> </div> 

My first and most important problem is that I cannot get the rotated text (class="verticaltext") in the X-Axis to be reliably positioned in the lower div (#BarChartXAxis). I have tried all kinds of values for left/right/bottom etc. but the text goes all over the place. I finally got it to work using the above code, but as soon as I changed the size of the browser window it gets all munged again. Note that the dates are generated on the fly so there could be as few as 7 dates and as many as 90. Hence I need to be able to adjust it dynamically.

My second problem is minor - I cannot get the Y-Axis text to sit at the bottom of the Div that it is in (#B2CardLeft).

For both the above, I am willing to use jQuery if that makes it reliable. TIA!

Answer 1

To solve your first problem:

 #B2Card { height: 340px; padding: 0; padding-bottom: 5px; } #B2CardLeft { height: inherit; float: left; width: 10%; text-align: right; } #B2CardRight { float: right; width: 90%; height: inherit; position: relative; } #BarChart { float: left; height: 75%; width: 100%; border-left: 2px solid white; border-bottom: 2px solid white; text-align: left; } #BarChartXAxis { float: left; height: 25%; width: 100%; background-color: #0FC; } .verticaltext { position: absolute; transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); bottom: 15px; color: #fff; } 

 <div id="B2Card"> <div id="B2CardLeft"> <p class="YAxis">60</p> <p class="YAxis">50</p> <p class="YAxis">40</p> <p class="YAxis">30</p> <p class="YAxis">20</p> <p class="YAxis">10</p> </div> <div id="B2CardRight"> <div id="BarChart"></div> <div id="BarChartXAxis"> <p class="verticaltext">2017-10-10</p> <p class="verticaltext" style="left:4%">2017-10-11</p> <p class="verticaltext" style="left:8%">2017-10-12</p> <p class="verticaltext" style="left:12%">2017-10-13</p> <p class="verticaltext" style="left:16%">2017-10-14</p> </div> </div> </div>