css style for a button-like <div> <p>I am trying add in my project to simulate a popup window (where later I will add content from others pages from my application). I have the follow code:</p> <p><strong>html</strong></p> <pre><code>&lt;div id="box"&gt; &lt;div id="title"&gt;Titulo &lt;span id="button"&gt;X&lt;/span&gt; &lt;/div&gt; &lt;div id="text"&gt;Conteudo&lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>javascript/jquery</strong></p> <pre><code>$('window').load(function(){ $('#box').draggable(); }); </code></pre> <p><strong>css</strong></p> <pre><code>#box { box-sizing: padding-box; box-shadow: 10px 5px 5px black; border-style: solid; position: absolute; width: 320px; height: 640px; min-width: 160px; min-height: 500px; max-width: 500px; max-height: 750px; top: 200px; left: 200px; } #button { background-color: red; padding: 0px 0px 0px 95%; min-width: 32px; max-width: 5%; position:absolute; } #title { background-color: black; text-decoration-color: white; font: 32px/36px arial; position: relative; } #text { background-color: white; text-decoration-color: black; font: 24px/28px sans-serif; position: relative; } </code></pre> <p>Bottom line: I want the element identified by id=button stay in the right corner of the title bar from my "window", but in this current state, that's what i got:</p> <p><a href="https://imgur.com/Og96LkY" rel="nofollow noreferrer"><img src="https://i.imgur.com/Og96LkY.png" title="Hosted by imgur.com" /></a></p> <p>how i can improve this to achieve what i want?</p> <p>ps.: i accept suggestion using jquery / jquery-ui. I try earlier BootstrapDialog, but don't serve for my project because dont't ajust itself according to loaded content and block the other contents from my page when it's open.</p>