Currently, I am engaged in developing a timesheet/billing system for a client's project. One of the main tasks on my plate is to create an effective grid-layout that accurately displays data in its designated positions. We have not yet determined which server-side programming platform will be utilized for this system, so we are currently working with plain HTML. The client has requested our collaboration in finalizing the aesthetic appeal and layout of the HTML before moving forward with any implementation, as per the initial client requirements...
However, there seems to be a deviation from the main topic. Upon inspecting the first row of the grid, you may notice green 'Approve' and red 'Reject' buttons. Adjacent to the reject button, there appears to be a small portion of blue background color visible. It was brought to our attention that this is incorrect, prompting us to address this grid layout issue.
During my investigation, I observed that this issue relates more to responsive web design since it does not present itself on my monitor screen of 1440x900. In that view, everything appears perfectly aligned. However, when viewed at varying resolutions in terms of width and height, the blue background color becomes increasingly conspicuous. This led me to realize that this stems from the absence of designing a responsive web grid from the outset. Admittedly, prioritizing this aspect wasn't deemed crucial initially, given the uncertainty surrounding how the grid layout would evolve after creating the web designer's mockup from scratch. As we progressed through the project and established a foundation, we gained insights on how to ensure responsiveness within our grid layout.
It appears that I now need to tackle these issues sooner than anticipated. Consequently, I find myself under pressure to determine the best course of action to rectify this pending problem prior to presenting it to the client. I've heard about two approaches to grid-based responsive web design: DIY and framework-based. With no previous experience in responsive web design, I seek your recommendation on which approach would be most beneficial towards resolving layout issues on the page (and subsequently utilizing that groundwork across all other grids within the timesheet billing system).
Here's the code pertaining to the layout of the problematic row:
<div class="table_row 1">
<div class="table_column" style="width: 110px;">
Steven Kugel
</div>
<div class="table_column" style="width: 110px;">
Mrs Smith
</div>
<div class="table_column" style="width: 60px;">
03.07.2014
</div>
<div class="table_column" style="width: 110px;text-align:center;">
3.5
</div>
<div class="table_column" style="width: 120px;text-align:center;">
80%
</div>
<div class="table_column" style="width: 130px;text-align:center;">
4
</div>
<div class="table_column" style="width: 76px;text-align:center;">
7.5
</div>
<div class="table_column" style="width: 45px;">
1,575
</div>
<div class="table_column" style="width: 126px;background-color: #fff;display:inline-flex;">
<div style="float:left;margin-right: 5px;">
<input type="button" value="Approve" name="APPROVE" style="background-color: #6EBA66;width: 58px; height: 0px; margin-right: 4px; padding-top: 1px;padding-bottom: 18px;font-size:13px;"></div>
<div style="float:left;">
<input type="button" value="Reject" name="REJECT" style="background-color: #D70D1E;width: 58px; height: 0px; margin-right: 4px; padding-top: 1px;padding-bottom: 18px;font-size:13px;"></div>
</div>
</div>
Please feel free to offer constructive criticism so I can enhance my responsive web design skills further.