Can't get bottom credits lines to position correctly

I have been working on a redesign of my jewelry site and ronpat has been gracious enough to help me. I am almost done with the index page except for my jewelry images, but the bottom credit lines will not position correctly. They need to be along the bottom of the page floating left and right. The copyright on the left and the design credit on the right. I have tried to float and it throws everything in the footer off. I “borrowed” code from my web business site, which uses Skeleton but is not built to be responsive for the credits lines and that did not work. That site actually has 2 footer areas, which I tried to duplicate. One for the links and one for the bottom credits. Any help would be greatly appreciated. Thanks. :confused:

Give me a little time and I will rewrite the footer code. Should be able to post it by tomorrow. (The repair isn’t hard. Just want to test as thoroughly as I can :slight_smile: )


There are several ways to code the footer that you seek. The files in the link demonstrate three ways of coding the columns of lists and the row of credits. It should be easy to mix and match any row of link column containers and any row of credits containers as desired. Pick your favorites :slight_smile:

All of the CSS code changes are near the bottom of the CSS files.
Be sure to note that the HTML is slightly different for each method.
As usual, I left several outlines in place and visible so you could see how the objects are arranged.

version 1c:
The three columns are inline-block boxes and are children of the <footer> box.
The credits are inline-block boxes within the div.credits container which is a child of the <footer> box.
(The odd-looking comment marks in the HTML cancel the white space between the inline-block boxes.)

version 1d:
The three columns are floated left within their own row container, div.mylinks.
The credits are also floated left and right within their own row container, div.credits.

version 1e:
The three columns are inside 3 table-cells within a CSS table, div.mylinks.
The credits are also inside 2 table-cells within another CSS table, div.credits. Alignment is set with the text-align property in the table-cell.

I love you, ronpat!!! Thank you so much for all your help. I think version 1d comes closest to what I was trying to accomplish. This shows me that sometimes you can’t interchange code from site to site and have it function the same. I was trying to take the code that worked in the Skeleton code for my web business site and make it work with this site. Sometimes you do have to re-invent the wheel! :wink:

Glad to be of service. :slight_smile: