Spacing rows evenly inside div

Question

I have a div that has a table inside it, and it uses to create the links to it. So far, that's all I have done for the website. I'm attempting to space out the rows so that I can implement jQuery into it, however, I haven't started that yet.

My problem is that I can't get the rows to space evenly throughout the div. I've tried padding-left/right, however, that doesn't work with width and height, and margin-left/right aren't working. Is there a way to do this? Or, should I just get rid of the idea of using a table and create divs for each nav option?

Code

@UghThatGuyAgain - It's not clear for me what are you trying to achieve - if you make the table 100% width the rows will "space evenly throughout the div". In general using tables for positioning elements is not a good idea. — Picard, May 06 '17 at 16:11
@Picard I should've been more specific, I want them evenly spaced throughout the div, while providing even space between the rows. I'll attempt to recreate the same thing using divs, I found this easier to do though. Thanks! — UghThatGUyAgain, May 06 '17 at 16:16

Picard · Accepted Answer · 2017-05-06T16:38:41.917

Here's one possible solution using lists and display:flex for positioning. Your updated example: https://repl.it/Hj62/6.

HTML part:

<div id="header-nav-content">
  <ul class="table-nav-content">
     <li class="nav-home">Home</li>
     <li class="nav-about">About</li>
     <li class="nav-contact">Contact</li>
  </ul>
</div>

CSS part:

.table-nav-content {
    text-align: center;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0;
}
.table-nav-content li {
    list-style: none;
}

You can also check if:

justify-content: space-between;

doesn't suit you better. You can find more about flex positioning, for example: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Thank you! This answer worked the best for me, I just removed the extra home2/3 and so on, and I'll readjust the size of them to make sure they'll look good. — UghThatGUyAgain, May 06 '17 at 19:50

score 0 · Answer 2 · edited May 23 '17 at 10:31

I would recommend that you use the HTML list approach, https://www.w3schools.com/html/html_lists.asp. You might want to use margin not padding to space out each item evenly, When to use margin vs padding in CSS.

<ul style="list-style:none;">
        <li style="display:block;float:left;margin:5px" class="nav-home">Home</li>
        <li style="display:block;float:left;margin:5px" class="nav-about">About</li>
        <li style="display:block;float:left;margin:5px" class="nav-contact">Contact</li>
</ul>

Spacing rows evenly inside div

2 Answers2