Shah Quadri Shah Quadri - 3 months ago 12
CSS Question

Not able to arrange two divs side by side

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 messageing 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 cant 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>




Answer

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>

Comments