Centering a Div Between One That's Floated Right and One That's Floated Left

centering a div between one that's floated right and one that's floated left

If you have two floated divs, then you know the margins. The problem is that the float:right div should be put before the middle div. So basically you will have:

left-floated | right-floated | centered

Now, about the margins: usually you can just use margin:0 auto, right? The problem is that right now you know the values of the margins: floated divs! So you just need to use:

margin:0 right-floated-width 0 left-floated-width

That should work.

Years later edit

Meanwhile, a new toy is in town: flexbox. The support is fairly good (i.e. if you don't need to support lower than IE 10) and the ease of use is way over floats.

You can see a very good flexbox guide here. The example you need is right here.

how to center a div between another two (left and right) divs?

How about this:

.left {
    float:left;
    width: 33.3%
}
.right {
    float:right;
    width: 33.3%;
    text-align: right;
}
.center{
    float: left;
    width: 33.3%;
    text-align: center;
}

DEMO

Edit in response to comment

If you want to include borders, you'll need to update the widths accordingly. CSS uses a box model in which total width is margin + border + padding + content (controlled by width property). Here is a DEMO that adds 1px borders to each div and updates the width accordingly.

Center one <div> and float other right

Try using absolute positioning instead of floating.

Something like:

#container1 {
    margin: auto;
    background-color: red;
    width: 50%;
    height: 100%;
    max-width: 600px;
    padding-bottom: 15px;
    text-align: center;
    display: block;
    position: absolute;
    left: 25%;
}

#container2 {
    background-color: #CC9900;
    max-width: 600px;
    width: 50%;
    height: 100%;
    padding-top: 60px;
    padding-bottom: 50px;
    text-align: center;
    display: block;
    position: absolute;
    right: -25%;
}​

Here is a jsfiddle
EDIT: If you don't want absolute positioning for container1, just add top: 0; to container2

How Do I Perfectly Center a Float Element in Between Two Floated Elements?

One approach would be to set the display of the middle element to inline-block and then use text-align: center on the parent element for horizontal centering:

Example Here

.footer {
    background: #e33;
    padding: 5px;
    text-align: center;
}
.left_edge {
    float: left;
}
.center {
    display: inline-block;
}
.right_edge {
    float: right;
}

Alternatively, you could avoid floating the elements, and use the following method instead:

Example Here

.footer > span {
    display: inline-block;
    width: 33.333%
}
.left_edge {
    text-align: left;
}
.center {
    text-align: center;
}
.right_edge {
    text-align: right;
}

CSS center between float: left and right inline without width

Your code is correct. Just add one css line.

#header{
    text-align: center;
}

demo - https://jsfiddle.net/dhananjaymane11/thwsegs8/1/

How do I center a div between two other divs?

If you float left the middle div and give a margin left to the same middle div, It is not always in the middle when screen size is changed. So you have to set middle div position absolute and make it always in the middle for all screen sizes. You can make anything make center by setting position absolute and giving left:0; right:0; margin:auto; css properties. So Make center div position absolute and add left:0px; right:0px; css styles.So add new styles for .center class.

.left {
  height:300px;
  width:200px;
  border:3px solid black;
  float:left;
  border-top-right-radius:15px;
  border-top-left-radius:15px;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
  background-color:aliceblue;
  margin-bottom:10px;
}

.center{
  height:100px;
  width:100px;
  background-color:blue;
  margin-left:auto;
  margin-right:auto;
  position:absolute;
  left:0;
  right:0;
}

.right{
  height:300px;
  width:200px;
  border:3px solid black;
  float:right;
  border-top-right-radius:15px;
  border-top-left-radius:15px;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
  background-color:aliceblue;
  margin-bottom:10px;

}

  <div class="left">
     </div>

 <div class="center">
    </div>

    <div class="right">
    </div>

How do I center content next to a floated element and relative to the containing element?

Solved it through trial and error. I don't know why but in my testing it only works if width is set between 12 and 80%.

So it seems "h1" is a block element, and text-align does not center block elements, it only centers inline elements inside it, which explains the "centered off-center" behavior. So it turns out the answer is the same answer to the question "how do you center a block element?"

<div>
    <h1 style="text-align:center;">Heading 1</h1>
    <img style="float:left;" src="logo.gif"/>
    <h1 style=" 
             text-align:center;
             margin-left:auto;
             margin-right:auto;
             width:50%;
      ">Heading 2</h1>
</div>
<div style="clear:both;">
  Content goes here
</div>

---

Related Topics