Positioning Button Over A Box Inside The Same DIV

[knbfoster]

Hello,
I am trying to create a box that has a “read more” button on the bottom of it. I would like it to look like this…
https://test.insureyonder.com/wp-content/uploads/2016/12/boxfun.jpg

However, I can’t seem to get the “read more” button to appear like it does in the design. I got it to work by creating another div outside of the main container div, but I need to create multiple boxes on a page laid out side by side and I can’t do that when I put the read more button outside of the container div.

Here’s what I have so far… http://codepen.io/knfoster/pen/YpMLgr

I appreciate any help you can give.

Thank you!

[Beverleyh]

However, I can’t seem to get the “read more” button to appear like it does in the design.

Without getting into how you can clean-up/reduce your markup, and just concentrating on the position of the button in relation to existing elements, you can remove the existing margins and positioning from .basics-readmore and use the following instead;

.basics-readmore {
  bottom: -20px;
  position: absolute;
  margin:0 auto;
  left:0;
  right:0;
}

[clgolden]

Hello, @knbfoster. You could float the main box like I did here: http://codepen.io/clgolden/pen/XNvBoe?editors=1100.

Are you familiar with flexbox, yet? That’s what I would use.

[Atelierbram]

Off topic, I know, but I’ve been returning to this kind of ui-module lately, but am hesitant on the naming part. ISO “box” or “panel” I am thinking about “IntroPanel”. (Intro short for introduction). So in the end this could be like “ns-IntoPanel_Component-themevariation” (ns=stands in for namespace, in the spirit of Ben Frain’s “Enduring CSS”).

Can someone think of a better alternative for “IntroPanel”; native english speakers, anyone?

[knbfoster]

That did it @beverleyh! Sorry about the messy markup. I was trying everything to get it to work right. :)

Thanks!

[Author]

Posts