Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Positioning Button Over A Box Inside The Same DIV

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #249460
    knbfoster
    Participant

    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!

    #249461
    Beverleyh
    Participant

    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;
    }
    
    #249462
    clgolden
    Participant

    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.

    #249480
    Atelierbram
    Participant

    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?

    #249493
    knbfoster
    Participant

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

    Thanks!

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.