Home/ Questions/Q 4055224
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T14:40:28+00:00

Problem: In the following HTML-markup: <html> <body> <div id=div_1></div> <div id=div_2></div> </body> </html> I

  • 0

Problem: In the following HTML-markup:

<html>
  <body>
    <div id="div_1"></div>
    <div id="div_2"></div>
  </body>
</html>

I want both div‘s (this can be any other tag) to be centered AND positioned side-by-side. How to achieve this with CSS, without adding a third parent container?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Demo here: http://jsfiddle.net/Shehi/6RqWb/

    Following CSS rules solve the problem:

    #div_1
{
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative;
    left: 50%;
    margin-left: -200px; /* = -1 * the width of element */
    float: left;
    clear: none;
}

#div_2
{
    width: 200px;
    height: 200px;
    background-color: blue;
    position: relative;
    right: 50%;
    margin-right: -200px; /* = -1 * the width of element */
    float: right;
    clear: none;
}
    • 0