Not able to arrange two divs side by side

Question

Okay, so I know there are a few questions similar to this on StackOverflow which already have been answered but they didn't help me.

I am building a messaging service and for that I have two divs, contacts_box (300px) and message_box(500px). They are both wrapped inside a parent div which is 800px in width. I want align these two divs side by side inside the parent div. But no matter what I do, I just can't get them to align!

Please take a look at my HTML and CSS and show where I am going wrong with this?

* {
    margin: 0;
    padding: 0;
}
.page_layout {
    position: fixed;
    top: 50px;
    width: 100%;
    height: 100%;
    border: 1px solid green;
}
.page_container {
    width: 800px;
    height: 100%;
    margin: 0 auto;
    clear: both;
    border: 1px solid blue;
}
// Contacts Box and its elements  
.contacts_box {
    float:left;
    height:100%;
    width:300px;
    border:1px dashed magenta;
}
// Message Box and its elements
.message_box {
    float:right;
    height:100%;
    width:500px;
    border:1px dashed lemonchiffon;
}

<html>
  <head>
   <link rel="stylesheet" href="http://kinskeep.com/test.css">
  </head>
<body>
<div class="page_layout">
  <div class="page_container">
    <div class="contacts_box"> CONTACTS BOX </div>
    <div class="message_box">
      <div class="message_displayBox"> Message Box </div>
      <div class="message_textBox"> </div>
    </div>
  </div>
</div>
</body>
</html>

use **float : left** property. – abhit Sep 02 '16 at 05:53 — abhit, Sep 02 '16 at 05:53

score 4 · Accepted Answer · answered Sep 02 '16 at 05:24

You can use box-sizing to solve the issue rather than calculating the width and border widths:

Add box-sizing: border-box to the inner containers and box-sizing: content-box to the outer container and there you go!

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.page_layout {
  position: fixed;
  top: 50px;
  width: 100%;
  height: 100%;
  border: 1px solid green;
}
.page_container {
  width: 800px;
  height: 100%;
  margin: 0 auto;
  clear: both;
  border: 1px solid blue;
  box-sizing: content-box;
}
 .contacts_box {
  float: left;
  height: 100%;
  width: 300px;
  border: 1px dashed magenta;
}
 .message_box {
  float: right;
  height: 100%;
  width: 500px;
  border: 1px dashed lemonchiffon;
}

<body>
  <div class="page_layout">
    <div class="page_container">
      <div class="contacts_box">
        CONTACTS BOX
      </div>

      <div class="message_box">
        <div class="message_displayBox">
          Message Box
        </div>

        <div class="message_textBox">
        </div>

      </div>
    </div>
  </div>

</body>

score 2 · Answer 2 · answered Sep 02 '16 at 05:16

2

The most basic solution: The border of the divs is not included in the width. So you either need to calculate the width as

width1 + border1 + width2 + border2 = 800px

or make your container div larger.

answered Sep 02 '16 at 05:16

morre

152
10

1

why not use `box-sizing: border-box`? – Denis Ivanov Sep 02 '16 at 06:46

Hitesh Misro · Answer 3 · 2016-09-02T05:30:25.223

Put your comments inside /* Comments Goes Here */

change your width px to % and use box-sizing: border-box; to the floated divs.

*{
    margin:0;
    padding:0;
}

.page_layout
{
  position:fixed;
  top:50px;
  width:100%;
  height:100%;
  border:1px solid green;
}

.page_container
{
  width:800px;
  height:100%;
  margin: 0 auto;
  clear:both;
  border:1px solid blue;
}

.contacts_box
{
  float:left;
  height:100%;
  width:40%;
  border:1px dashed magenta;
  box-sizing: border-box;
}

.message_box
{
  float:right;
  height:100%;
  width:60%;
  border:1px dashed lemonchiffon;
  box-sizing: border-box;
}

<div class="page_layout">
    <div class="page_container">
        <div class="contacts_box">
            CONTACTS BOX
        </div>
        <div class="message_box">
            <div class="message_displayBox">
                Message Box
            </div>
            <div class="message_textBox">
            </div>
        </div>
    </div>
</div>

Enmanuel Duran · Answer 4 · 2016-09-02T05:30:35.667

1

The problem: You have borders in both elements (.contact_box and .message_box) and they are taking 1px from each side so they will never fit together because there is not enough space, I recommend you to use the property box-sizing:border-box; for this cases, it'll put the borders inset of the element instead of outside, so you don't have to worry about them.

.contacts_box
{
  float:left;
  height:100%;
  width:300px;
  border:1px dashed magenta;
  box-sizing: border-box;
}

.message_box
{
  float:right;
  height:100%;
  width:500px;
  border:1px dashed lemonchiffon;
  box-sizing: border-box;
}

Also if you are using pure css (without pre-processors) use comments like this /* Comment */ to avoid problems.

edited Sep 02 '16 at 05:30

answered Sep 02 '16 at 05:27

Enmanuel Duran

4,988
3
17
29

Thanks a lot for your solution. I did not consider the border-box property. – Shah Quadri Sep 02 '16 at 05:30
Yes @ShahQuadri It's a great property to implement when you don't want to worry about dynamic sizes. – Enmanuel Duran Sep 02 '16 at 05:35
it's better if you set `* {box-sizing: border-box;}` fyi – Denis Ivanov Sep 02 '16 at 06:43

score 0 · Answer 5 · answered Sep 02 '16 at 05:22

Your comment method was wrong. in Vanilla CSS - we use /* Your comment */ to make comments.

// - is supported in LESS, SASS, Stylus kind of pre-processors.

If you run your code on browser, you can see, none of the CSS for contactbox and messagebox was working.

*{
    margin:0;
    padding:0;
}

.page_layout
{
  position:fixed;
  top:50px;
  width:100%;
  height:100%;
  border:1px solid green;
}

.page_container
{
  width:800px;
  height:100%;
  margin: 0 auto;
  clear:both;
  border:1px solid blue;
}

/* Contacts Box and its elements */

.contacts_box
{
  float:left;
  height:100%;
  width:300px;
  border:1px dashed magenta;
}

/* Message Box and its elements */

.message_box
{
  float:right;
  height:100%;
  width:500px;
  border:1px dashed lemonchiffon;
}

<html>
  <head>
    <link rel="stylesheet" href="http://kinskeep.com/test.css">
  </head>  
  
  <body>
    <div class="page_layout">
    <div class="page_container">
     <div class="contacts_box">
      CONTACTS BOX
     </div>
    
     <div class="message_box">
      <div class="message_displayBox">
       Message Box
      </div>
      
      <div class="message_textBox">
      </div>
      
     </div>
    </div>
   </div>

  </body>
</html>

Himanshu Vaghela · Answer 6 · 2016-09-02T05:34:57.953

You give border to inner DIV so its also add in its actual width. So if possible give color to inner DIV or expand Parent DIV width.

* {
  margin: 0;
  padding: 0;
}
.page_layout {
  position: fixed;
  top: 50px;
  width: 100%;
  height: 100%;
  border: 1px solid green;
}
.page_container {
  width: 800px;
  height: 100%;
  margin: 0 auto;
  clear: both;
  border: 1px solid blue;
}
.contacts_box {
  float: left;
  height: 100%;
  width: 300px;
  background: blue;
}
.message_box {
  float: right;
  height: 100%;
  width: 500px;
  background: red;
}

<html>

<head>
  <link rel="stylesheet" href="http://kinskeep.com/test.css">
</head>

<body>
  <div class="page_layout">
    <div class="page_container">
      <div class="contacts_box">
        CONTACTS BOX
      </div>

      <div class="message_box">
        <div class="message_displayBox">
          Message Box
        </div>

        <div class="message_textBox">
        </div>

      </div>
    </div>
  </div>

</body>

</html>

NOTE: Your code is correct but you give wrong comment in CSS. That's why its not working. Please check comment in CSS part. Here I update your code with remove comment. Its working fine.

UPDATE

Also you can using box-size:border-box outer DIV and box-size:content-box to inner DIV. You can solve it using this method also.

Denis Ivanov · Answer 7 · 2016-09-02T06:47:58.637

We have to stop using floats and start using flex!

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

.page_layout {
  position: fixed;
  top: 50px;
  width: 100%;
  height: 100%;
  border: 1px solid green;
}

.page_container {
  display: flex;
  flex-direction: row;
  width: 800px;
  height: 100%;
  margin: 0 auto;
  border: 1px solid blue;
}

.contacts_box {
  flex: 1 0 300px;
  border: 1px dashed magenta;
}

.message_box {
  flex: 1 0 500px;
  border-left: 1px dashed lemonchiffon;
}

<div class="page_layout">
  <div class="page_container">
    <div class="contacts_box">
      CONTACTS BOX
    </div>

    <div class="message_box">
      <div class="message_displayBox">
        Message Box
      </div>

      <div class="message_textBox">
      </div>

    </div>
  </div>
</div>

score -1 · Answer 8 · answered Sep 02 '16 at 05:17

-1

Your container with width:300px and border:1px as a whole has 301px width. Try changing your width to 299px or making 802px the bigger box

answered Sep 02 '16 at 05:17

user2721510

9
2

score -1 · Answer 9 · answered Sep 02 '16 at 05:20

<html>
  <head>
    <link rel="stylesheet" href="http://kinskeep.com/test.css">
  </head>  
  <style>
*{
    margin:0;
    padding:0;
}

.page_layout
{
  position:fixed;
  top:50px;
  width:100%;
  height:100%;
  border:1px solid green;
}

.page_container
{
  width:800px;
  height:100%;
  margin: 0 auto;
  clear:both;
  border:1px solid blue;
}



.contacts_box {
    float: left;
    height: 100%;
    width: 298px;
     border: 1px dashed magenta;
}


.message_box {
    float: right;
    height: 100%;
    width: 498px;
     border: 1px dashed lemonchiffon; 
}
</style>
  <body>
    <div class="page_layout">
    <div class="page_container">
     <div class="contacts_box">
      CONTACTS BOX
     </div>
     <div class="message_box">
      <div class="message_displayBox">
         Message Box
      </div>
      <div class="message_textBox">
      </div>

     </div>
    </div>
   </div>

  </body>
</html>
</html>

if want to add border then reduce width by same px which you are taking borders like make them 498 and 298 px res.

score -2 · Answer 10 · answered Sep 02 '16 at 05:36

<html>
  <head>
     <style>

.page_layout
{
  position:fixed;
  top:50px;
  width:100%;
  height:100%;
  border:1px solid green;

}

.page_container
{
  width:800px;
  height:100%;
  margin: 0 auto;
  clear:both;
  border:1px solid green;
}

#contacts_box
{
  float:left;
  height:100%;
  width:300px !important;
  background-color:#f9dada !important;
}


#message_box
{
  float:left;
  height:100%;
  width:500px;
  background-color:#deffe5;
}
</style>
  </head>  
  
  <body>
    <div class="page_layout">
    <div class="page_container">
     <div id="contacts_box">
      CONTACTS BOX
     </div>
    
     <div id="message_box">
      Message Box
      
     </div>
    </div>
 </div>

  </body>
</html>

Why are using `!important`? – Denis Ivanov Sep 02 '16 at 06:40 — Denis Ivanov, Sep 02 '16 at 06:40

Not able to arrange two divs side by side

10 Answers10

Linked