CODEWITHSUNDEEP
htmlcss
UghThatGUyAgain
UghThatGUyAgain

Reputation: 151

Spacing rows evenly inside div

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

Upvotes: 0

Views: 661

Answers (2)

Picard
Picard

Reputation: 4112

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/

Upvotes: 2

Anthony Liriano
Anthony Liriano

Reputation: 599

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>

Upvotes: 0

Related Questions