CODEWITHSUNDEEP
htmlcss
Cambridge Design Company
Cambridge Design Company

Reputation: 41

How to position two divs side by side in a browser window, centered

Could somebody please show me how to position two divs horizontally side by side, centered within the browser window?

They need to be exactly the same width and height but with a gap in between them of 'not a lot'. As well as making them responsive.

I have looked on stack for the answer but none of the answers cover what I am trying to achieve.

Upvotes: 0

Views: 878

Answers (5)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

The best approch for that is to use Viewport units: vw, vh, vmin, vmax with the calc() CSS function together.

*{box-sizing: border-box; padding: 0; margin: 0} /*reset all browser style*/

:root{background: black; min-height: 100vh; width: 100vw} /*set the root element to viewport*/

body{ text-align: center} /*ask the browser to set the box in the middle of the screen*/

article{
  background: white;
  width: calc(50vw - 40px);  /*reserve 20x2px for the margin*/
  height: calc(100vh - 20px);  /*reserve 10x2px for the margin*/
  display: inline-block;
  margin: 20px 10px   
}
<article></article>
<article></article>

But you can use percentage too

*{box-sizing: border-box; padding: 0; margin: 0}

:root{background: black; min-height: 100vh}

section{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center
}

article{
  background: white;
  width: 48%;
  height: 90%;
  display: inline-block;
  margin: 5% auto
}
<section>
  <article></article>
  <article></article>
</section>

Upvotes: 3

vkjgr
vkjgr

Reputation: 4448

To get exactly the same height I suggest to use flexbox. 

body { /* or use extra wrapper element */
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}
body > div {
  background-color: orange;
  margin: 0 .25em; /* for gap */
  width: 40%;
}
<div>first. equal height by default. equal height by default. equal height by default. equal height by default. equal height by default. equal height by default. equal height by default. equal height by default. </div>
<div>second</div>

Upvotes: 0

Pawan
Pawan

Reputation: 605

HTML: 

<div class="parent-div">
     <div class="child-one"></div>
     <div class="child-two"></div>
</div>

CSS:

.parent-div{
    width: 100%;
    text-align: center;
}

.child-one, child-two{
    display: inline-block;
    width: 30%;
}
.child-one{
    margin-left: 5px;
}

height of the div's will be determined by content inside them.

Upvotes: 0

Anupam Basak
Anupam Basak

Reputation: 1523

Check this out : http://jsfiddle.net/8uwcs679/

I've created two divs of 40% width. left div have margin right of 5%. Hence total width remaining = 100% - (40%+40%+5%) = 15%;

Then I've set margin left of left div to 15%/2 = 7.5% which will center the divs and it will be responsive too.

HTML :

<div class="side left"></div>
<div class="side right"></div>

CSS :

.side{
    float: left;
    width:40%;
    height: 100px;
    background: rgba(0,0,0,0.2);
}

.left {
    margin-right: 5%;
    margin-left: 7.5%;
}

Upvotes: 0

user3111011
user3111011

Reputation: 145

Check this 

<style>
        #main { 
        width: 800px;
        margin: 0 auto;
    }
    #sidebar    {
        width: 400px;
        height: 400px;
        background: red;
        float: left;
    }

    #page-wrap  {
        width: 400px;
        background: yellow;
        height: 400px;
        float: right;
    }
    </style>
    <div id="main">
      <div id="sidebar"></div>
      <div id="page-wrap"></div>
    </div>

Upvotes: 0

Related Questions