user37422 user37422 - 4 months ago 5x
CSS Question

Issue with 2 div slightly shifted

I would like to align (horizontally) 2

(first one is up relatively to the second) but I get a slight shift between both.

The Code (

#global-ui {
position: relative;
#gui {
position: absolute;
top: 20px;
right: 0;
margin: 20px;
padding: 0;
overflow: hidden;
border: 2px solid blue;
#buttons-wrapper {
position: absolute;
top: 200px;
right: 0;
margin: 20px;
padding: 0;
border: 2px solid red;
#buttons {
margin-left: auto;
margin-right: auto;
border: 2px solid white;

<div id="global-ui">
<div id="gui"></div>
<div id="buttons-wrapper">
<div id="buttons">
<button type="button" id="startButtonId" class="btn btn-primary" tabindex="13">Start</button>
<button type="button" id="resetButtonId" class="btn btn-default" tabindex="14">Reset</button>

I get the following result of my menu in the right top corner of

little space between blue box and red box

As you can see, there is a little horizontal space between the left border of blue box and the left border of red box. They are not perfectly aligned.

On the right border side, both seem to be aligned.

I don't know where this issue could come from, maybe from the browser (I have tested it with Firefox)?


The solution of Tawfiq Injass works but I can't get to replace
" 2 + 'px' "
by an automatic computing of border width like this :

document.getElementById('buttons-wrapper').style.width = gui.width - parseInt(document.getElementById('gui').style.borderWidth,10) + 'px';

Unfortunately, this doesn't work.

How can I do for getting automatically the border width of div#gui ? thanks


Hello you get this effect because you use JavaScript to calculate and set the Width of the red box

in this line

document.getElementById('buttons-wrapper').style.width = gui.width + 'px';

you need to compensate for the border width since your border is 2px this line need to be

document.getElementById('buttons-wrapper').style.width = gui.width-2 + 'px';