CODEWITHSUNDEEP
htmlcssgoogle-chromecss-float
scorpio1441
scorpio1441

Reputation: 3088

Eliminate gap between floated elements in Chrome

There is an unexpected gap between div and table elements in Google Chrome. Tried many solutions including Why is there an unexplainable gap between these inline-block div elements? , but no luck.

Unfortunately I cannot replace table with div due to specifics.

Also, zooming in 110% removes the gap.

Please help.

enter image description here

https://jsfiddle.net/bdyju024/

div {
  float: left;
  width: 18%;
  background-color: orange;
}

table {
  float: right;
  width: 82%;
  border-spacing: 0;
}

table td {
  background-color: gray;
}
<div>
  test
</div>
<table>
  <tr><td>test</td></tr>
</table>

Upvotes: 0

Views: 89

Answers (1)

xWaZzo
xWaZzo

Reputation: 758

Just float:left; or right every element.

Themes are normally written right to left (rtl) or left to right (ltr), which means that every float on the grid go to an specific side.

Your example forked: https://jsfiddle.net/xwazzo/u6k60vkz/1/

If you like the answer please select it. Cheers!

EDIT:

Please read carefully the css:

div {
  float: left; /* If you select float: left, both floats should go to the same direction. */
  width: 18%;
  background-color: orange;
}

table {
  float: left; /* This one was floated to right, you need LEFT in order to get what you need.*/
  width: 82%;
  border-spacing: 0;
}

Look my live example on jsfiddle https://jsfiddle.net/bdyju024/

Upvotes: 2

Related Questions