CODEWITHSUNDEEP
htmlcss
Vicky
Vicky

Reputation: 17405

Positioning a div between two divs

I have two div elements as below:

<div class="div1">
  This is div 1
</div>
<div class="div2">
  This is div 2
</div>

With css as:

.div1 {
  border-style: solid;
  float: left;
  width: 50%;
}
.div2 {
  border-style: solid;
  margin-left: 50%;
  padding-left: 10px;
}

I want to add a third div which has nothing but a symbol through css.

<div class="div3">
</div>

with css:

.div3:after {
    font-family: "FontAwesome";
    content: "\f100";
    color: blue;
    font-size: 1.5em;
}

For this to nicely position between the two original div's, I changed div 2's css to:

.div2 {
  border-style: solid;
  margin-left: 51%;
  padding-left: 6px;
}

This looks ok on FullScreen. However, when I minimize the browser window to a smaller size, div2 starts overlapping div3.

How can I nicely position div3 between div1 and div2 with even space at both sides of div2?

Here's the JSFiddle for my try: https://jsfiddle.net/d8nuw2m3/5/

Edit:

The flex solution provided below by Roy works fine. However, assume that the content of left and right div's grows a lot. In which case, scroll bar will appear. What if in this case, I want to keep the position of the middle div fixed as I scroll down ?

Adding position: fixed to div3 css doesn't work.

Here's the fiddle: https://jsfiddle.net/zL8sc2a9/

Upvotes: 1

Views: 2553

Answers (2)

Roy
Roy

Reputation: 8089

You can achieve this adding a div around it and using display: flex;. Floating elements is really the old way to do this.

Edit
I updated the snippet to have the .div3:after fixed with scrolling.

.page {
  background-color: #eee;
  height: 150vh;
}

.wrapper {
  display: flex;
  justify-content: space-between;
}

.div1 {
  border-style: solid;
  width: 50%;
  margin-right: .5em;
}

.div2 {
  border-style: solid;
  width: 50%;
  margin-left: 1.5em;
}

.div3:after {
  position: fixed;
  font-family: "FontAwesome";
  content: "\f100";
  color: blue;
  font-size: 1.5em;
}
<div class="page">
  <div class="wrapper">
    <div class="div1">
      This is div 1
    </div>
    <div class="div3">
    </div>
    <div class="div2">
      This is div 2
    </div>
  </div>
</div>

Upvotes: 0

Stalinko
Stalinko

Reputation: 3656

Solution #1

You could use flex for this.

Wrap all div's in a container with display: flex:

<div class="flex-container">
  <div class="div1">
    This is div 1
  </div>
  <div class="div3">
  </div>
  <div class="div2">
    This is div 2
  </div>
</div>

.flex-container {
  display: flex;
}

Let the div1 and div2 grow equally (remove widths, margins, paddings):

.div1 {
  border-style: solid;
  flex-grow: 1;
}
.div2 {
  border-style: solid;
  flex-grow: 1;
}

Set a fixed width to the div3:

.div3 {
  width: 18px;
}

That's it! Flex will do the trick for you: https://jsfiddle.net/1amuwfj5/

Solution #2

Use calc() to subtract div3 width from div1 and div2. General idea:

.div1 {
  border-style: solid;
  float: left;
  width: calc(50% - 15px); /* we subtract 9x (half of div3) and 6px (border width) */
}
.div2 {
  border-style: solid;
  float: right;
  width: calc(50% - 15px);
}
.div3 {
  width: 18px;
}

Example: https://jsfiddle.net/1amuwfj5/1/

Upvotes: 2

Related Questions