CODEWITHSUNDEEP
htmlcss
Naz
Naz

Reputation: 910

Position elements within a div with one element on the left and two on the right

I have a Div with 3 Divs within it 1,2,3 and want 1 to be on the left, and then in order, 2 and 3 to be on the right. 1 is fine but I am having difficulties with 2 and 3, I tried using float right on 2 and 3 but that gives me 1,3,2. The basic HTML/CSS setup is as follows, since I will be making it responsive I can not used fixed positioning;

    		.main {
    		  background-color: #cccccc;
    		  width: 100%;
    		  height: 250px;
    		}
    		.item1 {
    		  background-color: #006699;
    		  width: 100px;
    		  height: 250px;
    		  float: left;
    		}
    		.item2 {
    		  background-color: #990000;
    		  width: 100px;
    		  height: 250px;
    		  float: right;
    		}
    		.item3 {
    		  background-color: #009900;
    		  width: 100px;
    		  height: 250px;
    		  float: right;
    		}
    		
<div class="main">

  <div class="item1">

    <p>This is item 1 placeholder text</p>

  </div>
  <!-- Closes item 1 -->

  <div class="item2">

    <p>This is item 2 placeholder text</p>

  </div>
  <!-- Closes item 2 -->

  <div class="item3">

    <p>This is item 3 placeholder text</p>

  </div>
  <!-- Closes item 3 -->

</div>
<!-- Closes main -->

Upvotes: 0

Views: 67

Answers (3)

cнŝdk
cнŝdk

Reputation: 32175

Problem:

The problem here is that when you set float:right; to .item2 it will be parsed before .item3 and it will stick on the right.

Solution:

The best solution is to wrap these two item divs in another div, give them display:inline-block; and give float:right; to this wrapping div.

This is a working DEMO:

.main {
  background-color: #cccccc;
  width: 100%;
  height: 250px;
}
.item1 {
  background-color: #006699;
  width: 100px;
  height: 250px;
  float: left;
}
.item2 {
  background-color: #990000;
  width: 100px;
  height: 250px;
  display:inline-block;
}
.item3 {
  background-color: #009900;
  width: 100px;
  height: 250px;
  display:inline-block;
}
.rightDiv {
  float: right;
}
<div class="main">

  <div class="item1">

    <p>This is item 1 placeholder text</p>

  </div>
  <!-- Closes item 1 -->
  <div class="rightDiv">
    <div class="item2">

      <p>This is item 2 placeholder text</p>

    </div>
    <!-- Closes item 2 -->

    <div class="item3">

      <p>This is item 3 placeholder text</p>

    </div>
    <!-- Closes item 3 -->
  </div>
</div>
<!-- Closes main -->

Upvotes: 0

Micposso
Micposso

Reputation: 43

I would wrap 2, and 3 in another div with float right and a width of 200px. Then float item2 left, and item3 right. See the CSS code below.

    .item2 {
        background-color: #990000;
        width: 100px;
        height: 250px;
        float: left;       
    }

    .item3 {
        background-color: #009900;
        width: 100px;
        height: 250px;
        float: right;               
    }

    #wrap { float:right; width:200px; }

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115342

Flexbox can do that.

.parent {
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey;
  display: flex;
}
.child {
  height: 100px;
  width: 100px;
  border: 1px solid red;
  background: pink;
}
.child:first-child {
  margin-right: auto;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Upvotes: 1

Related Questions