html - How to fit inner div inside an outer div -


html:

<div style="width: 300px; position: absolute; right: 25%; top: 5%; -webkit-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);">     <section class="notif notif-warn">         <h6 class="notif-title">warning!</h6>         <p>this task forced checked out user. changes not saved site.master.</p>         <div class="notif-controls">             <a href="#" class="notif-close" id="cbtn">close</a>         </div>     </section> </div> 

jsfiddle: http://jsfiddle.net/sikni8/kb2r6d4c/1/

how can update css ensure inner div fits within outer div box shadow.

you can add box-sizing: border-box; .notif class or remove 100% width.

the problem when add 100% width + padding element cause overflow.


Comments

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -