Float Left, no line break, Float None Creates Line Breaks (Inline Block)

HTML & CSS
1

I have a bunch of li elements in a UL element that go across the width of the page. They are perfectly sized, where each element is the same 16.666667%. They fit perfect.

But when I get rid of “float:left”, and do “float:none”, they have to drop one element down a line. I can’t tell why. They are inline-block. If I change the percentage to 16.4%, they all go across the same line again.

How can I have it not drop the element to next line, as should fit the same as when float:left.

Cheers!
Ryan

2

Well that explains it there.
Inline blocks and inline elements create a white-space node when they are formatted on a new line in the HTML source code.

That node adds to the overall width which is why you had to reduce your width to 16.4

You can use flexbox or display:table to eliminate the whites-pace nodes.

You will get better alignment options with flex.

2 Likes
3

Not in IE or edge :slight_smile: You will get a 1px gap at the side at some widths as they are not very clever at rounding those dimensions properly.

Use flex or display:table if older support is required (as mentioned by Ray above).

Here’s a display:table version.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html,body,ul{margin:0;padding:0;}

ul{list-style:none;background:red;display:table;width:100%;}
li{display:table-cell;background:#f9f9f9;width:16.666667%;}
</style>



</head>

<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
</body>
</html>

Change the display:table-cell to float left and then test in IE or edge and you will see the red background show at the right edge as the window is resized unlike the table-cell version.

Indeed using the table-layout:fixed algorithm you don;t have to work out the width needed.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html,body,ul{margin:0;padding:0;}
ul{list-style:none;background:red;display:table;width:100%;table-layout:fixed;}
li{display:table-cell;background:#f9f9f9;}
</style>
</head>

<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
</body>
</html>

Or simpler still with flex.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html,body,ul{margin:0;padding:0;}
ul{list-style:none;background:red;display:flex}
li{flex:1 0 0;background:#f9f9f9;}
</style>
</head>

<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
</body>
</html>
3 Likes
4

Thanks so much, I will try that out.

So my temporary solution was to do “font-size:0px;” in the parent element and that fixed the issue.

I will try the Flex, though I’m working in Wordpress with WPBakery that has the pre-built classes for responsive columns so working to get custom classes to work with the column classes built-in.

Cheers!
Ryan

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.