html - How to put six divs in two rows -


my problem when put 6 divs texts , images in 2 rows should this. http://2.firepic.org/2/images/2015-08/17/wv2fu4foh87c.png

but when add

@media screen , (min-width:1000px){     .container {     width: 940px;     margin: 0 auto;     overflow:hidden;} } 

and try resize window happening

http://2.firepic.org/2/images/2015-08/17/u06pnsn3elx3.png

here code

     <div class="container">         <div class="work-wrap ">             <div class="work-item icon1">                 <h5 class="title">select piece of jewelry like.</h5>                 <p>you can choose size, decoration material (silver, gold)</p>              </div>             <div class="work-item icon2">                 <h5 class="title">make decoration unique.</h5>                 <p>you can write variety of phrases, change shape, , adjust polishing.</p>              </div>             <div class="work-item icon3">                 <h5 class="title">payment methods chosen decorations.</h5>                 <p>you can use credit card, , other convenient you.</p>              </div>              <div class="work-item icon4">                 <h5 class="title">above decoration ready within 3-7 days.</h5>                 <p>on site can choose convenient way delivery.</p>              </div>             <div class="work-item icon5" >                 <h5 class="title">you have passed menu items.</h5>                 <p>we beautifully pack , deliver decoration in our signature box.</p>              </div>             <div class="work-item icon6">                 <h5 class="title">wear purchased item pleasure.</h5>                 <p>as credit cards, , other convenient you.</p>              </div>             </div>       </div> 

and css

.work-wrap {     overflow: hidden;     display: inline-block;     margin-bottom: 220px; }  h5.title {     margin-bottom: 20px;     text-align: left;     font: 18px/18px robotobold;     color: #464646;     width: 100%; }  .work-item {     float: left;     width: 33.33%;     padding: 90px 8px;  }  .icon1 {     background: url('d:/htmlcss/jewelery/img/icon1.png') no-repeat left top;     }  .icon2 {     background: url('d:/htmlcss/jewelery/img/icon2.png') no-repeat left top; } .icon3 {     background: url('d:/htmlcss/jewelery/img/icon3.png') no-repeat left top; } .icon4 {     background: url('d:/htmlcss/jewelery/img/icon4.png') no-repeat left top; } .icon5 {     background: url('d:/htmlcss/jewelery/img/icon5.png') no-repeat left top; } .icon6 {     background: url('d:/htmlcss/jewelery/img/icon6.png') no-repeat left top; } 

how can fix it?

using width , padding, third column drops down, since have account margin , padding of body or other outside tags.

.work-wrap {     overflow: hidden;     display: inline-block;     margin-bottom: 220px;     text-align: center; }  .work-item {     display: inline-block;     width: 32%;     padding: 90px 8px;     text-align: left; } 

Comments

Popular posts from this blog

php - Admin SDK -- get information about the group -

dns - How To Use Custom Nameserver On Free Cloudflare? -

Python Error - TypeError: input expected at most 1 arguments, got 3 -