Forcing a DIV to cover entire row using CSS

Question

I am using a framework which is generating 3 div tags. These three div tags cover one row on the page. It looks like the first div covers 25% of the row and 2 div covers 25% of the row and the third div covers 50% of the row. I have access to the css class which third div is utilizing which looks like this:

.dataTables_processing {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 125px;
  margin-left: 0;
  padding: 7px;
  text-align: center;
  color: #333;
  font-size: 13px;
  border: 1px solid #ddd;
  background-color: #eee;
  vertical-align: middle;
  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}

Is there any way to modify this class to make it cover the entire row?

Answer 1

Try this

display: block;
width: 100%;
min-width: 100% !important;

Answer 2

Try adding :

position:absolute;
left:0;
width:100%;

Answer 3

If you are trying to have some div that each one takes a row and you want them to align vertically, use bootstrap and you can do something like this:

<div style='display: flex; flex-direction: column;'>
  <div class='row'> my content to take a row </div>
  <div class='row'> my content to take second row </div>
  <div class='row'> my content to take a third</div>
</div>

Hope it helps.