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?
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
Post a Comment