created button and its getting out from div body. suggestion?

StackOverflow https://stackoverflow.com/questions/23312471

  •  10-07-2023
  •  | 
  •  

Question

I made a button inside the div body and i want to show it on the right side of my div but when i zoom the page it get outside from the div body need help?

 <style>
   .mydiv
   {
    max-width:65%;
    min-height:30px;
    margin-left:20%;
    margin-right:16%;
   }
   .a
   {
   max-width:100px;
   height:20px;
   position:relative;
   margin-left:220px;
   }
 </style> 
 <html>
 <div class="mydiv">
 <button class="a">example</button>    
 </div>
 </html>
Was it helpful?

Solution

I think this is happening because (for your div)

max-width:65%;

in the css...if you zoom in enough the button (which has max-width of 100px) is now exceeding the width of your div. Try setting your div to a number of pixels larger than 100px. If you want the button on the right side of the div, try setting the width to a number such as 300px.

max-width:300px;

then try zooming in. Also note IE6 and earlier do not support max-width.

OTHER TIPS

You don't show us much context, but it may work positioning the button to the right using position:absolute;right:0;. (Note you'll need position:relative; on the container to keep it inside the container element)

.mydiv {
    position: relative;
    max-width: 65%;
    min-height: 30px;
    margin-left: 20%;
    margin-right: 16%;
    background: tan;
}
.a {
    position: absolute;
    right: 0;
    max-width: 100px;
    height: 20px;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top