Not Able To Arrange Two Divs Side By Side

March 02, 2024 Post a Comment

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

Solution 1:

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><divclass="page_layout"><divclass="page_container"><divclass="contacts_box">
        CONTACTS BOX
      </div><divclass="message_box"><divclass="message_displayBox">
          Message Box
        </div><divclass="message_textBox"></div></div></div></div></body>

Solution 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.

Solution 3:

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;
}

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

Solution 4:

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.

Solution 5:

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><linkrel="stylesheet"href="http://kinskeep.com/test.css"></head><body><divclass="page_layout"><divclass="page_container"><divclass="contacts_box">
						CONTACTS BOX
					</div><divclass="message_box"><divclass="message_displayBox">
							Message Box
						</div><divclass="message_textBox"></div></div></div></div></body></html>

Learn Html5