CSS footer column spacing - html

Question

I need some assistance with my code I am looking to creating a footer with four equal columns, right now the fourth column in spaced too far to the right, any assistance you can provide is appreciated.
#footer {
background: #E5E0DD;
margin: auto;
min-width: 860px;
padding: 0;
}
#footer div {
margin: 0 auto;
overflow: hidden;
padding: 26px 0 0;
width: 960px;
}
#footer div div {
margin: auto;
padding: 0;
text-align: left;
width: 240px;
}
#footer div div h3 {
color: #000;
font-size: 12px;
font-weight: bold;
margin: 0 0 5px 0;
padding: 0;
text-transform: uppercase;
}
#footer div div ul,
#footer div div ul li {
margin: auto;
list-style: none;
padding: 0;
}
#footer div div ul li {
font-size: 12px;
line-height: 22px;
color: #06C;
}
#footer div p {
color: #c1c1c1;
font-size: 10px;
margin: left;
padding: 0 0 2px 0;
text-align: right;
text-shadow: 1px 1px 1px #fff;
}
<div id="footer">
<div>
<div>
<h3>Policies & Directives</h3>
<ul>
<li><span class="ms-rteThemeForeColor-5-4">
</span></li>
</ul>
</div>
<div>
<h3>In the know...</h3>
<ul>
<li><span class="ms-rteThemeForeColor-5-4">
<!-- FAQs- Select and move from comments based on appropriate
page-->
<a href="#"
</span></li>
</ul>
</div>
<div>
<!-- Centers -->
<h3>Centers</h3>
<ul>
<li><span class="ms-rteThemeForeColor-5-4">
FAQs<br/>
<!-- Glossary -->
</span></li>
</ul>
</div>
<div>
<!-- About -->
<h3>About</h3>
<ul>
<li><span class="ms-rteThemeForeColor-5-4">
Mission Statement<br>
Overview<br>
Organizational
</span></li>
</ul>
</div>
</div>
</div>
This was unnecessary and difficult for no reason. I need help with my code. I am looking for columns equally spaced.

Answer 1

I'm going to give you the basic building blocks and the following methods you can go about achieving this:
Float Method
Inline-Block Method
Flex Method
.footer-col {
min-height: 200px;
width: 25%;
background: #ddd;
border: 1px solid white;
box-sizing: border-box;
}
.float .footer-col {
float: left;
}
footer#footer {
margin-bottom: 20px;
clear: both;
overflow: auto;
}
.inline-block .footer-col {
display: inline-block;
max-width: 24.5%;
}
#footer.flex {
display: flex;
}
h3 {
border-top: 1px solid #ddd;
padding-top: 15px;
}
h3:first-of-type {
border: 0px;
padding: 0px;
}
<h3>Float Method</h3>
<footer id="footer" class="float">
<div class="footer-col"></div>
<div class="footer-col"></div>
<div class="footer-col"></div>
<div class="footer-col"></div>
</footer>
<h3>Inline-Block Method</h3>
<footer id="footer" class="inline-block">
<div class="footer-col"></div>
<div class="footer-col"></div>
<div class="footer-col"></div>
<div class="footer-col"></div>
</footer>
<h3>Flex Method</h3>
<footer id="footer" class="flex">
<div class="footer-col"></div>
<div class="footer-col"></div>
<div class="footer-col"></div>
<div class="footer-col"></div>
</footer>
The rest is up to you!

Answer 2

There are at least 4 ways to create an element with children that are evenly divided. Inline-block, tables, floats, and flex-box.
Inline-block has a funny space to account for between them... so, 25% will not work as you expect. Tables are for data(in my opinion). Floats are great, but they take themselves our of the document flow in a way you need to understand well. Flex-box is probably the most versitile, but you need to be aware of the browser prefixes or use autoprefixer. Here is an example of both floats and flex-box.
https://jsfiddle.net/sheriffderek/fbatsw02/
Markup
<footer class="site-footer floats">
<div class="inner-w">
<ul class="module-list">
<li class="module">one</li>
<li class="module">two</li>
<li class="module">three</li>
<li class="module">four</li>
</ul>
</div>
</footer>
<footer class="site-footer flex-box">
<div class="inner-w">
<ul class="module-list">
<li class="module">one</li>
<li class="module">two</li>
<li class="module">three</li>
<li class="module">four</li>
</ul>
</div>
</footer>
Styles
* {
box-sizing: border-box;
margin: 0;
}
.site-footer .inner-w {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.module-list {
list-style: none;
margin: 0;
padding: 0;
}
.module {
padding: 1rem;
}
/* with floats */
.site-footer.floats {
background: wheat;
overflow: hidden; /* fixes how the inner float collapses this element */
}
.site-footer.floats .module {
width: 25%;
float: left;
}
/* with flexbox */
.site-footer.flex-box {
background: lightgreen;
}
.site-footer.flex-box .module-list {
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.site-footer.flex-box .module {
flex-basis: 25%;
}