DopeAt DopeAt - 1 year ago 253
CSS Question

Trying to put 3 columns on my footer but no result

I try to make a footer with 3 cols but I can't make it. So here is the result I try to do

enter image description here

But instead of this I get this result

enter image description here

Here is my html and CSS code:

.footer {
background:none #333;
height:100%;
margin:0 10px;
padding:0;
}

.footer div:first-child {
float:left;
margin:0 0 0 20px;
overflow:hidden;
}
.footer div:first-child ul {
list-style:none;
margin:0;
overflow:hidden;
padding:10px 0 0;
}
.footer div:first-child ul li {
color:#026593;
float:left;
font-size:11px;
}
.footer div:first-child ul li:first-child a {
padding-left:0;
}
.footer div:first-child ul li a {
color:#026593;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
line-height:30px;
padding:0 13px;
text-decoration:none;
text-transform:uppercase;
}
.footer div:first-child ul li a:hover, .footer div:first-child ul li.selected a {
color:#ff7500;
}
.footer div:first-child p {
color:#026593;
display:block;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
line-height:11px;
margin:-2px 0 0;
text-decoration:none;
text-transform:uppercase;
}
.footer div.connect {
float:right;
padding:20px 20px 0;
}
.footer div.connect span {
color:#ff7500;
float:left;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
line-height:12px;
text-transform:uppercase;
}
.footer div.connect a {
float:left;
height:22px;
margin:0 0 0 7px;
text-indent:-99999px;
width:23px;
}
.footer aside h4{
color: #1b9bff;
padding-left: 6.3789%;
padding-top: 2%;
margin-bottom: -1%;
border-bottom: 1px solid #666;
width: 18.23%;
}
.footer div h4{
color: #1b9bff;
padding-left: 6.3789%;
padding-top: 2%;
margin-bottom: -1%;
border-bottom: 1px solid #666;
width: 18.23%;
float: left;
}
.footer aside ul li{
color :#1b9bff;
padding-bottom: 5px;
padding-top: 5px;
border-bottom: 1px solid #666;
width: 20%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: small;
float: left;
}
.footer aside ul li a:hover{
color: #1b9bff;
}
.footer p{
color: #1b9bff;
padding-left: 28%;
}
.footer div p{
color :#1b9bff;
padding-bottom: 5px;
padding-top: 5px;
width: 20%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: small;
float: left;
}
.footer div img{
padding: 20px 0 0 20px;
}
.footer div ul li a:hover{
color: #1b9bff;
}


And my html code

<div id="main-footer">
<div class="footer">
<aside>

<h4>Sitemap</h4>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</aside>
<div>
<h4>Menu</h4>
<img src="./images/gpwa.gif" />
<img src="./images/18.png" />
<img src="./images/21.png" />
<p>I put some text here</p>
<p>I put some text here</p>
<p>I put some text here</p>
<p>I put some text here</p>
<p>I put some text here</p>
<p>I put some text here</p>
<p>I put some text here</p>
</div>
<div>
<h4>Terms</h4>
<p>I put some text here</p>
<p>I put some text here</p>
<p>I put some text here</p>
<p>I put some text here</p>
<p>I put some text here</p>
<p>I put some text here</p>
<p>I put some text here</p>
<p>I put some text here</p>
<p>I put some text here</p>
<p>I put some text here</p>
<p>I put some text here</p>
<p>I put some text here</p>
<p>I put some text here</p>
<p>I put some text here</p>
</div>

</div>
</div>


Thank you

Answer Source

.footer {
    background: none #333;
    height: 100%;
    margin: 0 10px;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

.footer div:first-child {
float:left;
margin:0 0 0 20px;
overflow:hidden;
}
.footer div:first-child ul {
list-style:none;
margin:0;
overflow:hidden;
padding:10px 0 0;
}
 .footer div:first-child ul li {
color:#026593;
float:left;
font-size:11px;
}
.footer div:first-child ul li:first-child a {
padding-left:0;
}
.footer div:first-child ul li a {
color:#026593;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
line-height:30px;
padding:0 13px;
text-decoration:none;
text-transform:uppercase;
}
.footer div:first-child ul li a:hover, .footer div:first-child ul li.selected a {
color:#ff7500;
   }
 .footer div:first-child p {
color:#026593;
display:block;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
line-height:11px;
margin:-2px 0 0;
text-decoration:none;
text-transform:uppercase;
}
.footer div.connect {
float:right;
padding:20px 20px 0;
}
.footer div.connect span {
color:#ff7500;
float:left;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
line-height:12px;
text-transform:uppercase;
}

.flex-column {
  display: flex;
flex-direction: column;
}
 .footer div.connect a {
float:left;
height:22px;
margin:0 0 0 7px;
text-indent:-99999px;
width:23px;
 }
.footer aside h4{
color: #1b9bff;
padding-left: 6.3789%;
margin-bottom: -1%;
border-bottom: 1px solid #666;
width: 18.23%;
 }
.footer div h4{
color: #1b9bff;
padding-left: 6.3789%;
padding-top: 2%;
margin-bottom: -1%;
border-bottom: 1px solid #666;
width: 18.23%;
float: left;
}
.footer aside ul li{
color :#1b9bff;
padding-bottom: 5px;
padding-top: 5px;
border-bottom: 1px solid #666;
width: 20%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: small;
float: left;
 }
.footer aside ul li a:hover{
color: #1b9bff;
}
.footer p{
color: #1b9bff;
padding-left: 28%;
 }
.footer div p{
color :#1b9bff;
padding-bottom: 5px;
padding-top: 5px;
width: 20%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: small;
float: left;
 }
 .footer div img{
padding: 20px 0 0 20px;
}
.footer div ul li a:hover{
color: #1b9bff;
 }
  <div id="main-footer">
       <div class="footer">
                    <aside>

                        <h4>Sitemap</h4>
                        <ul class="flex-column">
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                        </ul>
                      </aside>
                        <div class="flex-column">
                            <h4>Menu</h4>
                        <img src="./images/gpwa.gif" />
                        <img src="./images/18.png" />
                        <img src="./images/21.png" />
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        </div>
                        <div class="flex-column">
                            <h4>Terms</h4>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                        </div>

      </div>
    </div>

I inserted some flexbox elements to the divs and the whole footer. As mentioned, this code needs some cleaning. I'm just giving the skeleton so you can change it after.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download