So I'm trying to divide a page ( in fact just a footer ) into 8 equal fluid columns ( I was aiming for 6 ), and the only way I thought I could do it is with percentage.
I set a percentage of width: 12.5%;
to each of the columns ( which are in fact some links set as display: block; float: left;
) and it should have worked, but it didn't. I mean the columns or links should have been equally divided in the page but there's still some space there, about 100px
( my screen has 1366px
in width ).
So what should I do about that ? How can I divide the links / columns is 8 ( preferably 6 ) equal fluid columns ?
<footer>
<div class="footer-jigsaw"></div>
<div class="footer-wrapper">
<nav class="navigation">
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</nav>
</div>
</footer>
footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:50px;
background-image:url(../gfx/background-light.png);
background-position:center center;
background-repeat:repeat;
-webkit-opacity:0;
-moz-opacity:0;
opacity:0;
filter:alpha(opacity=0);
}
footer .footer-jigsaw {
position:absolute;
top:0;
width:100%;
height:10px;
background-image:url(../gfx/footer.png);
background-position:0 center;
background-repeat:repeat-x;
z-index:5;
}
footer .footer-wrapper {
position:relative;
margin:0 auto;
width:100%;
height:50px;
}
footer .footer-wrapper .navigation {
position:relative;
margin:0 auto;
width:100%;
height:50px;
}
footer .footer-wrapper .navigation a {
position:relative;
float:left;
display:block;
cursor:pointer;
width:12.5%;
height:50px;
padding-top:0;
padding-left:10px;
padding-right:10px;
padding-bottom:0;
font-family:good-times-bad-times;
font-size:inherit;
font-style:normal;
font-weight:400;
font-variant:normal;
text-align:center;
text-decoration:none;
text-shadow:none;
text-indent:inherit;
text-transform:none;
word-spacing:normal;
line-height:58px;
letter-spacing:normal;
color:#fff;
-webkit-transition:all .35s ease-in-out;
-moz-transition:all .35s ease-in-out;
-ms-transition:all .35s ease-in-out;
-o-transition:all .35s ease-in-out;
transition:all .35s ease-in-out;
}
footer .footer-wrapper .navigation a:first-child {
border:none;
}
footer .footer-wrapper .navigation a:last-child {
border:none;
}
footer .footer-wrapper .navigation a.jp-current {
background-color:rgba(0,0,0,0.2);
font-family:good-times-bad-times;
font-size:inherit;
font-style:normal;
font-weight:400;
font-variant:normal;
text-align:center;
text-decoration:none;
text-shadow:none;
text-indent:inherit;
text-transform:none;
word-spacing:normal;
line-height:58px;
letter-spacing:normal;
color:#00b8f0;
}
footer .footer-wrapper .navigation a.jp-current:hover {
background-color:rgba(0,0,0,0.2);
font-family:good-times-bad-times;
font-size:inherit;
font-style:normal;
font-weight:400;
font-variant:normal;
text-align:center;
text-decoration:none;
text-shadow:none;
text-indent:inherit;
text-transform:none;
word-spacing:normal;
line-height:58px;
letter-spacing:normal;
color:#00b8f0;
}
footer .footer-wrapper .navigation a:hover {
background-color:rgba(0,0,0,0.2);
font-family:good-times-bad-times;
font-size:inherit;
font-style:normal;
font-weight:400;
font-variant:normal;
text-align:center;
text-decoration:none;
text-shadow:none;
text-indent:inherit;
text-transform:none;
word-spacing:normal;
line-height:58px;
letter-spacing:normal;
color:#00b8f0;
}
Above is a part of all the CSS, but there's where I'm trying to do what I just mentioned.
Problem Solved: extra padding added to the blocks;