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

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

回答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.

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

回答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.

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

回答6:

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.

回答7:

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>

回答8:

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

回答9:

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

回答10:

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

来源：https://stackoverflow.com/questions/39284679/not-able-to-arrange-two-divs-side-by-side

标签

html

css

css-float

css-position

box-sizing