How to Center Two Divs Floating Next to One Another

How to center two divs floating next to one another

You will have to automatically set the margin and probably a specific width to your wrapper div

<div id="wrapper"></div>

In your CSS:

#wrapper {
    width: 70%;
    margin: 0 auto;
}

How to place two divs next to each other?

Float one or both inner divs.

Floating one div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

or if you float both, you'll need to encourage the wrapper div to contain both the floated children, or it will think it's empty and not put the border around them

Floating both divs:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}

Center multiple floating divs next to each other

You are specifying a pixel value for your width. No matter what you do with your floats, those pixel values are fixed and will never reach the end of the border. What you can do is set the width to a percentage like width: 33%;. You could also set your left and right margins to space out your divs like margin: 0 20px;.

What I typically do in these situations is wrap my elements in a div and use that div for positioning the elements. Then, the inner container I will use for background colors, text colors, etc. Something like that may work for you:

<div class="holder">
  <div class="wrapper">
     <div class="container">...</div>
  </div>
  <div class="wrapper">
     <div class="container">...</div>
  </div>
  <div class="wrapper">
     <div class="container">...</div>
  </div>
</div>

And the CSS:

.wrapper {
    float:left;
    width:33%;
}
.container {
    background-color: yellow;
    margin: 10px;
    padding: 20px;
}

Here is a fiddle: http://jsfiddle.net/bWFS8/

Center two div's horizontally, next to each other?

I have removed float:left; and reduced width by 150px just for example. and gave text-align:center to parent and display:inline-block to child

.bottom-add-bid-buttons {  text-align: center}.add-to-list,.connect-now {  width: 150px;  display: inline-block;  text-align: left;  border: 1px solid #ddd;}

<div class="infor-experience col-lg-2 more_info">  <div class="bottom-add-bid-buttons">    <div class="add-to-list">div 1</div>    <div class="connect-now bottom">div 2</div>  </div></div>

Horizontally Center two divs within a container div

You should change some styling for the wrapper and you'll be good:

.wrapper {
    display: block;
    text-align: center;
}

https://jsfiddle.net/fjtq28g7/3/

EDIT

If, by your comment, flexbox is still an option, you could try this:

https://jsfiddle.net/fjtq28g7/7/

The only actual changes are in the wrapper:

.wrapper {
    display: flex;
    text-align: center;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0 3%;
}

---

Related Topics