DopeAt DopeAt - 6 months ago 16
HTML Question

Trying to put 3 collumns on my footer but no result

I try to make a footer with 3 cols but i cant 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

Can someone plz help me.. 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

.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.