#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2004
    Posts
    996
    Rep Power
    15

    Scaling outer div to fit inner content


    Hi there,

    I am having real trouble working out how to scale an outer div to fit the inner contents while keeping things responsive.

    I'm using Bootstrap for this.

    This is my HTML:

    PHP Code:
    <div class="cta-buttons">
                <
    div class="row">
                <
    div class="col-centered">
                    <
    div class="button-container">
                            <
    div class="pull-left col-xs-12"><class="btn btn-large btn-gold" href="#">Learn More</a></div>
                            <
    div class="pull-left col-xs-12"><class="btn btn-large btn-gold" href="#">Learn More</a></div>
                            <
    div class="pull-left col-xs-12"><class="btn btn-large btn-gold" href="#">Learn More</a></div>
                    </
    div>
                </
    div>
                </
    div>
    </
    div
    and this is my CSS:

    PHP Code:
    .cta-buttons{
    background#eee;
    height370px;
    position:relative;}

    .
    button-container{
      
    positionabsolute;
      
    top50%;
      
    left:50%;
      
    transformtranslate(-50%,-50%);
      
    background#081743;
      
    padding:20px
      


    The pull-left class is simply a float:left so the buttons are next to each other, but when I scale, the outer blue box appears like this:

    help1.jpg
    and like this:
    help2.jpg

    The buttons should be aligned next to each other like this when on desktop and then scale down so the padding around the buttons is equal so they stack nicely on top of each other when on tablet/mobile.
    help3.jpg

    Any ideas what could be wrong?

    Thanks!
    Attached Images
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,115
    Rep Power
    4307
    The Bootstrap way would be to use the "col-md-4" class.

    However, I'd probably use Flex with table-cell fallback for desktop. I assume you're using mobile-first methodology.

    Code:
    .cta-buttons .button-container .btn-large {
    	width: 100%;
    }
    
    @media all and (min-width:740px) {
    	.cta-buttons .button-container {
    		display: table;
    		display: -webkit-flex;
    		display: flex;
    	}
    	.cta-buttons .button-container .col-xs-12 {
    		float: none !important; /* need to override Bootstrap here */
    		display: table-cell;
    		width: auto;
    	}
    }
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2004
    Posts
    996
    Rep Power
    15
    Hi,

    thanks for the reply.

    the above made the buttons appear all in one line rather than breaking them onto a new line each. Do you mean applying the
    Code:
    col-xs-4
    to the buttons? - I tried that but it didn't do anything.

    Any other ideas?

    Thanks for your help

IMN logo majestic logo threadwatch logo seochat tools logo