Not Able To Arrange Two Divs Side By Side

April 04, 2023 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>
  <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>

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

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

Baca Juga

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

Html5 Code Review