css - Issue with percentage width -


i have main div contains 3 divs, inner divs each separated widths of 20% 50% , 30%. encountered issue, when resizing window smaller sizes squeezed effect ass elements resize, want keep element 1 , 3 @ sizes (40px , 75px respectively). tried setting element 1 40px, element 2 100% , element 3 75px widths, eneded getting element 2 occupy space , push other elements out. i'll include image of normal state, resized state , desired state (on resize) wan't achieve. how achieve it?

enter image description here

as can see want middle section (element 2) resize windows resized.

     <div class="div-contain">         <div class="div-1"><div>        <div class="div-2"><div>        <div class="div-3"><div>      <div>     .div-contain {      position: relative; }  .div-1 {    width: 20%;    min-width: 40px;    float: left; }  .div-2 {     width: 50%;     position: abosolute;     margin: 0 auto; }   .div-3 {       width: 30%;       min-width:75px;       float: right; } 

you use media query , directly specify widths when reaches break point. add margin center div size of left div


Comments

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -