Eliminate gap between floated elements in Chrome

Question

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.

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>

I don't see a gap in your fiddle or the snippet you post in Chrome. — Rob, Mar 28 '16 at 16:04
I see the screenshot. I just don't see it anywhere else. Are you using a doctype? Which one? — Rob, Mar 28 '16 at 16:08

xWaZzo · Answer 1 · 2016-03-28T16:11:05.133

2

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/

edited Mar 28 '16 at 16:11

answered Mar 28 '16 at 16:06

xWaZzo

748
5
19

I agree with this solution, use `float: left;` for table too. both `div` and `table` should `float: left` it's tricky but works fine. @AlexG – Pedram Mar 28 '16 at 16:10
@AlexG I extended my answer. Please read carefully the css. Both elements should `float: left`. – xWaZzo Mar 28 '16 at 16:12
This didn't fix the issue. Full screen view: https://fiddle.jshell.net/bdyju024/show/ – Alex G Mar 29 '16 at 02:01
@AlexG `Float: left` on both elements bro. Read carefully your css. You can set both elements with float left if you write it like this: `div, table{ float:left }` **Full screen correct answer:** https://fiddle.jshell.net/ae3y7mfh/1/show/ And the code with live view: https://fiddle.jshell.net/ae3y7mfh/2/ – xWaZzo Mar 29 '16 at 15:32
I get it, both float left, but it still doesn't work. If you add another table inside the div the yellow background shows up on zoom: https://fiddle.jshell.net/ae3y7mfh/4/show . In other words - your example works only if there are no inside elements. – Alex G Mar 29 '16 at 20:43
@AlexG That happens because of fluid width *(units with % value)*, you need fixed width for this *(units with **px** or **em**)*. If you want it to be full width you will need little jQuery. Live ex: https://fiddle.jshell.net/cqxf6mk4/7/show/ and the code: https://fiddle.jshell.net/cqxf6mk4/7 – xWaZzo Mar 30 '16 at 16:06
@xWaZzo: Never used fixed width for any of my project. – Alex G Mar 31 '16 at 01:45

Eliminate gap between floated elements in Chrome

1 Answers1