Comparing and contrasting: Grid, Margin, Flex, Float

To help with the flex design, I commented out all of the existing nav styles. I also added a number to each link, to help me see what’s going on.

Using flex, and with a div for each row of links, we want the nav section to take up the full height of the available area, and we want the divs to auto size so that they take up an equal amount of space:

.wrapc .nav {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.wrapc .nav>div {
  flex: 1;
  border: 1px solid red;
}

The flex of 1 is shorthand for grow:1, shrink:1 and basis:auto. It is recommended that the short version be used, as it sets the other values intelligently.

  /*flex: 1 1 auto;*/
  flex: 1;

Removing the button numbers for simplicity, I can set justify-content on the container to be space-between and reduce the flex to 0.3, so that each div is 30% of the total height, the remaining space will be added between each div.

.wrapc .nav {
  ...
  justify-content: space-between;
}
.wrapc .nav>div {
  ...
  flex: 0.3;
}

With that red border removed, we now want each div to be a flex row with space-between too, and for each button to have a border:

.wrapc .nav>div {
  ...
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.wrapc .nav a {
  flex: 1;
  border: 3px solid #0059dd;
}

Because each button is 20% of the total width, a flex of slightly less than that gives a good spacing between each button:

.wrapc .nav a {
  flex: 0.18;
  ...
}

Here’s the jsfiddle for this flex version of the nav: https://jsfiddle.net/m9wexxny/189/

3 Likes

This doesn’t work either:

border-spacing: 3px;


.wrapb div {
   display:table-row;
}

.wrapb .nav a {
  display: table-cell;
  width: 50px;
  height: 50px;
  border-spacing: 3px;
  background: rgba(0, 0, 0, 0.2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

You’ll have to learn how CSS tables work. Like I said above it follows it own set of rules and they are not the same as other css methods.

The border-spacing CSS property specifies the distance between the borders of adjacent

cells. This property applies only when border-collapse is separate.

Both properties go on the parent

.wrap {
   display:table; /*shrink to fit without width*/
   margin:0 auto;
   border:3px solid red;
   position:relative;
   border-collapse: separate;
   border-spacing: 4px;
   padding: 0;
}

But you can’t collapse the spacing on the inner edges of the parent.

Now that messes it up even more:

I don’t understand why it’s not working.

Just guessing… since you didn’t describe how it is “messed up” or “not working”.
https://jsfiddle.net/m9wexxny/221/

.wrapb .nav a {
  display: table-cell;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
  vertical-align:top;  /* ADD Me. */
}

I need to figure out how to space those blocks out over the image.

It’s not even.

What is not even? Can you be more descriptive? specific?

You wont get a perfect replication. To use display table/row/cell you will have to flow with it’s layout rules.

The border spacing of a table is the same around all of the cells, and to the best of my knowledge, cannot differ.

1 Like

The links are supposed to be over the image, they are too far over the image:

You cannot achieve that using tables.

You’re not being very forthcoming with useful information, are you?

When I first showed you the border-spacing property, I mentioned the caveat that the border spacing extends to the edge of the table, not just between the cells.

It is possible to work around that feature, but it requires putting the table in a parent container and using overflow:hidden and negative margins… really messy.

So then why did @Ray.H say to use table then? If it won’t work?

Here’s what Ray said:

It doesn’t work. Using tables for layout is what web developers used to do decades ago, until it became apparent that they had many weaknesses. Then CSS was invented, to provide better and more effective ways to achieve their desired layout.

I’m disappointed, I thought it would work.

Here is another example using floats in div rows
Using display:table to contain those floats
The anchors are the only elements with dimensions.
It’s kinda similar to the table layout but I’m no longer bound to table layout rules.

EDIT: Done without any classes now

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.wrap {
   display:table; /*shrink to fit without width*/
   margin:0 auto;
   border:3px solid red;
   position:relative;
}
.wrap div {
   display:table; /*contain floats*/
   margin: 0 0 4px 0;
}
.wrap div:nth-child(3),
.wrap div a:last-child {margin:0;}

.wrap a {
   float:left;
   margin-right:4px;
   width:50px;
   height:50px;
   border:3px solid blue;
   background:lime;
}
   .wrap::after,
   .wrap::before {
       content: "";
       position:absolute;
       width:3px;
       height:100%;
       top:0; left:calc(33.3% - 1px);
       background:red;
   }
   .wrap::before {
      left:auto;
      right:calc(33.3% - 1px);
   }
</style>

</head>
<body>

<div class="wrap">
   <div>
      <a></a>
      <a></a>
      <a></a>
      <a></a>
      <a></a>
   </div>
   <div>
      <a></a>
      <a></a>
      <a></a>
      <a></a>
      <a></a>
   </div>
   <div>
      <a></a>
      <a></a>
      <a></a>
      <a></a>
      <a></a>
   </div>
</div>

</body>
</html>

We’ve been dealing with CSS tables in this thread. Not the same as HTML tables that were used decades ago.

CSS tables work with divs etc. , rather than <td> <tr>

1 Like

Yes, I agree - with the intention to achieve the same effect as tables.

1 Like

But now you just added float into it which, I’d rather use the regular float code then.

1 Like