3 column responsive footer - html

Question

I have a responsive grid layout for thumbnail images and a full width header. It is built using 'ul' and 'li' to make the grid. So basically I'm not using a responsive grid layout throughout. Although I would like to have a three column footer at the bottom that is responsive (stack on top of each other)
I want the first column to align full left and the other two columns to align right. each column is only around 15% of the total width (so i couldn't just have all three width 33%) I want the functionality of a three column layout like in many of the themes like skeleton boilerplate, etc
I am having trouble making a good css markup that will work, I have used...
css
F1 {
padding: 15px;
width: 100px;
margin: 0 0 0 20px;
float: right;
}
.F2 {
float: left;
text-align: left;
}
.F3 {
font-size: 13px;
text-align: right;
float: right;
}
but that just separates the divs, and doesn't offer much control
any help or references to help are greatly appreciated

Answer 1

If I'm understanding this correctly, the following can work. Shown with divs, but a ul & li structure would work as well.
HTML:
<div class="footer">
<div class="f1">first left</div>
<div class="f2">middle right</div>
<div class="f3">last right</div>
</div>
CSS:
.footer {
text-align: center;
width: 100%;
}
.f1 {
background: green;
padding: 0;
margin: 0;
}
.f2 {
background: pink;
}
.f3 {
background: blue;
}
.f1,
.f2,
.f3 {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
text-align: right;
font-size: 12px;
padding: 0 8%;
min-width: 300px;
width: 33%;
}
.f1 {
text-align: left;
}
If you set your divs to display inline-block with a min-width, on browser resize the columns will begin to stack one on top of the other.
Alternatively, depending on styling, you might want to set them to inline-block without a min-width, and set a media query for them to display block on all screen sizes you want them stacked one on top of the other.
If you set box-sizing to border-box, you can add the necessary padding to the inside of the container to keep the content area around 15% of the total width.
Hope this helps!