Home/ Questions/Q 533619
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T09:31:38+00:00

the best way center 2 divs inner div. Like this 1 2 3 4

  • 0

the best way center 2 divs inner div. Like this

  1 2 3 4 5 6 7 8 9 10 11 12 
1 ---------------------------
2 -       main div          -
3 -    ------      ------   -
4 -    -div1-      -div2-   -
5 -    ------      ------   -
6 -                         -
7 ---------------------------

Width and Height of main div is fixed.

thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    How about this? The only fixed thing you need to set are the margins of the inner div’s, but this shouldn’t harm as you didn’t tell about any restrictions in the margins in the comments on this topic. As to the styles, only the borders are purely presentational, the remaining are the minimum required styles.

    <!doctype html>
<html lang="en">
    <head>
        <title>SO question 1892901</title>
        <style>
            #main {
                position: relative;
                width: 500px;
                height: 300px;
                border: 1px solid black;
            }
            .inner {
                position: absolute;
                top: 0;
                bottom: 0;
                margin: 20px;
                border: 1px solid black;
            }
            .inner.left {
                left: 0;
                right: 50%;
            }
            .inner.right {
                right: 0;
                left: 50%;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="inner left">inner left</div>
            <div class="inner right">inner right</div>
        </div>
    </body>
</html>

    I should add, the strict doctype is very important, otherwise this ain’t going to work in IE due to the box model bug.

    • 0