Float button links to bottom of...

May 7th, 2015 at 01:39 AM
User 2088758 Photo

Steve
Senior Advisor
3,111 posts

This is something I have been struggling with for a long time now. I often have a row with 3 to 4 columns in it describing my clients service and what not. When I first lay it out using the paragraph elements everything looks good because the word count is exactly the same. I usually put some kind of link/button at the bottom saying Read more or Learn more. The problem is when i put the button in the same column as the paragraph it sits directly under it. When I add my content it doesnt always work out the to same height.

Now i know how to fix the height issue thats not the problem as you just set a min height and all is good. Problem comes when you add the button... I would like to float that button to the bottom of the column regardless of how many sentences in the paragraph above.

The way I have been dealing with it lately is just adding padding to each button individually until they line up... but that isn't perfect as they jump around a bit between the break points.

Here is an example right in my own website. http://misterwebguy.com/

Watch the buttons in the row below the menu.

Does anyone here know how to get this result im looking for?.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
May 7th, 2015 at 05:15 AM
User 1948478 Photo

Per
Senior Advisor
1,850 posts

For the button, specify:
position: absolute;
bottom: 0px;

and for the containing element, you may also need this (try first without it):
position: relative;
Per
www.mingas.com
May 7th, 2015 at 07:42 AM
User 232214 Photo

Bob Visser
COO
827 posts

What you are referring to is the 'Holy Grail Layout'. As it has it's own Wiki page (http://en.wikipedia.org/wiki/Holy_Grail … _design%29) it has been providing challenges for Web Designers for years.

In you case, I would solve it with a subgrid for each of the 4 sections. Placing the headings with the paragraphs and then the buttons in their own row will always make them line up horizontally. There may be other ways of doing it using min heights or maybe what Per proposes (although I can see that maybe not holding up at every screen width).

There's one other way...but I will be silent on that until we have it implemented :D
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
May 7th, 2015 at 09:39 AM
User 2088758 Photo

Steve
Senior Advisor
3,111 posts

Holy Crap! I'm on a Quest? :D:D:D I guess ill stick to using padding at different breakpoints to correct this issue. It works for the most part but is not perfect. Can't wait for your suggested solution!
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
May 7th, 2015 at 12:50 PM
User 1948478 Photo

Per
Senior Advisor
1,850 posts

Steve wrote:
I guess ill stick to using padding at different breakpoints to correct this issue. It works for the most part but is not perfect

You seem to be happy with using min-height to 'solve' the Holy Grail part of your problem. If so, and if I understood you right, that would mean the only thing remaining is that you want to make the buttons stay in line at the bottom of their parent containers. That's why I suggested the addition of the two simple lines to the button css, which will do exactly that. It sure beats playing around with padding at each break point. The part that "may not hold up at every screen width" is the min heights, not the positioning of the buttons.

Flexbox is of course the best solution to the Holy Grail issue, but it may not be available to you - yet...
Per
www.mingas.com
May 7th, 2015 at 01:11 PM
User 2088758 Photo

Steve
Senior Advisor
3,111 posts

Thanks Per!
Thanks Bob!

Yea I will give that a try tonight and use it until our favorite software company provides us with the map to the holy grail! :lol::lol::lol:
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
May 8th, 2015 at 09:33 AM
User 2088758 Photo

Steve
Senior Advisor
3,111 posts

Neither of these options worked for me :(

When i tried adding what you suggested it dropped all the buttons to the bottom of the website not to the bottom of the respective columns.

any other thoughts?
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
May 8th, 2015 at 10:06 AM
User 434929 Photo

Mansour ...
Ambassador
938 posts

Steve wrote:
Neither of these options worked for me :(

When i tried adding what you suggested it dropped all the buttons to the bottom of the website not to the bottom of the respective columns.

any other thoughts?


Steve I found something wrong with your site structure and that's why it's adds at the bottom of website,

I have done that before with RLMP and Code editor and Now I just tested out with RSD it works great here, try new brand blank project and test it out and found out whats wrong with your layout.

Guys at coffeecup are awesometacular.
May 8th, 2015 at 10:25 AM
User 1948478 Photo

Per
Senior Advisor
1,850 posts

Steve wrote:
When i tried adding what you suggested it dropped all the buttons to the bottom of the website not to the bottom of the respective columns.

Did you remember this:
Per wrote:
and for the containing element, you may also need this (try first without it):
position: relative;

I was only hedging on this one since I didn't know if it already was positioned 'relative'.
For the positioning to work as intended, the parent container (in your case, the 'box' that holds the text and the button) needs to have: position: relative;
The buttons dropping to the bottom of the page, means that the parent container is not positioned relative. The default 'container' then becomes the <body> tag.
It's all defined here:
http://www.w3schools.com/cssref/pr_class_position.asp
Specifically this statement:
"absolute: The element is positioned relative to its first positioned (not static) ancestor element"
Per
www.mingas.com
May 8th, 2015 at 11:41 AM
User 232214 Photo

Bob Visser
COO
827 posts

Steve wrote:
Neither of these options worked for me :(


No no no no Steve (:P), the sub-grid approach does work! It's a bit involved, but hey, we're talking holy grail here...

Here's a quick demo: http://holy-grail.coffeecup.com/index.html

Next to the sub-grid it includes hiding / showing of buttons, some extra containers and the use of min-heights...hand coding would be guarantee a headache but with responsive layout maker / site designer it's relatively fast.

If there's interest in the project file let me know, this one is kinda quick & dirty, I would need to make a few updates and use more semantic code (classes).
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.