CODEWITHSUNDEEP
htmlcss
Stephen Landaas
Stephen Landaas

Reputation: 57

How do I center a div between two other divs?

I'm new to CSS, and currently I have a right div, and a left div. I'm trying to put one between them and when I do, it'll move the right div slightly down. Here's what I have in CSS right now:

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


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

So what I'm asking is, how can I keep the center div in the middle, and keep both the left and right divs in their place and not move up/down?

Upvotes: 1

Views: 1359

Answers (4)

Gayan Fernando
Gayan Fernando

Reputation: 591

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>

Upvotes: -1

j08691
j08691

Reputation: 207901

You can change the order of the divs:

.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;
}
.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="right">
</div>
<div class="center">
</div>

From the W3C's Visual Formatting Model:

Content [that comes after the floated element] flows down the right side of a left-floated box and down the left side of a right-floated box.

Since you want the center div to be right of the left-floated div and left of the right-floated div, it should be placed after both divs in the HTML.

Or keep the divs the way they are and adjust the top margin on the right div:

.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;
}
.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;
  margin-top: -100px;
}
<div class="left">
</div>

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

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

A negative top margin offsets the effect of the float pushing the box down.

Upvotes: 2

cijanzen
cijanzen

Reputation: 19

There's not enough data about your desired outcome here but why not float all three divs to the left?

Update: You could use flexbox depending on your browser support. Put your divs into a container and set the container display to flex.

.container { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; }

Upvotes: 0

Felix A J
Felix A J

Reputation: 6470

You can also add negative margin to center div.

.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;
margin-bottom: -100px;
}


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

Upvotes: 0

Related Questions