How can I make my container to go down automatically of the page

nodeffect

New Member
#1
How can I make my container to go down automatically of the page if it exceed the width of the page? The page background is in black if you look at the jsfiddle and it's size is 780px. All two credit cards are displaying over the page. Thanks.
My CSS as below:
Mã:
<div class="container">
    <div class="sleeve">
      <div class="credit-card">
        <div class="card-company">West Frodo</div>
        <div class="card-number">
          <div class="digit-group">4141 7204 9012 0029</div>
        </div>
        <div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
        <div class="card-holder">John P. Smith</div>
        <div class="card-type">Debit card</div>
      </div>
    </div>
    <div class="sleeve">
      <div class="credit-card selected" style="background: #555">
        <div class="card-company">West Frodo</div>
        <div class="card-number">
          <div class="digit-group">4234 1302 3798 0265</div>
        </div>
        <div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
        <div class="card-holder">John P. Smith</div>
        <div class="card-type">Debit card</div>
      </div>
    </div>
    <div class="sleeve">
      <div class="credit-card" style="background: #3B3">
        <div class="card-company">West Frodo</div>
        <div class="card-number">
          <div class="digit-group">4812 0322 0517 2840</div>
        </div>
        <div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
        <div class="card-holder">John P. Smith</div>
        <div class="card-type">Debit card</div>
      </div>
    </div>
    <div class="sleeve">
      <div class="credit-card" style="background: #3B3">
        <div class="card-company">West Frodo</div>
        <div class="card-number">
          <div class="digit-group">4812 0322 0517 2840</div>
        </div>
        <div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
        <div class="card-holder">John P. Smith</div>
        <div class="card-type">Debit card</div>
      </div>
    </div>
</div>

</div>
Here's my fiddle: http://jsfiddle.net/5gronvk1/1/
 

Admin

Administrator
Thành viên BQT
#2
Update the following selectors in your CSS with the following:
Mã:
.container {
    height: 100%;
}
and
Mã:
.sleeve {
    display: inline-block;
    margin: auto;
}
 
Top