css - How to use @media min-wdth and max-width to fix the width of the containers -

i have 3 sections in webpage. when reduce window size, keeps on resizing. want stop resizing @ point contents in web page not overlap.

here code:

<div class="section1">  //code here </div> <div class="section2">  // code here </div> <div class="section3">  // code here. </div> 

here css.

.section1{ width:14%; } .section2{     width:26%;     left:14%; } .section3{     width: 60%;     left: 40%;  } 

i noticed @ 900px width page contents good. used statement.

@media (min-width:900px) {    .section1 {       width: 5%;     }         .section2{         width: 28%;        left: 5%;     }     .section3{         width: 67%;         left: 33%;     }     } 

it still keep on resizing till 230 pixels want stop resizing @ 900 pixels. have specify width in pixels instead of percentage?

you can wrap 3 div section div wrapper have predefined hardcode width of 900px.

html wrapper:

<div class="wrapper">     <div class="section1">      //code here     </div>     <div class="section2">      // code here     </div>     <div class="section3">      // code here.     </div> </div> 

css add:

.wrapper {width: 900px} 

hope solve issue.