CODEWITHSUNDEEP
html
user2624849
user2624849

Reputation: 11

I need help arranging div positions

Example: https://jsfiddle.net/La9jd2y7/

.one {
    height: 50px;
    width: 200px;
    background-color: #F60;
    float: left;
    text-align: center;
}
.two {
    height: 25px;
    width: 25px;
    background-color: #6F0;
    float: left;
    text-align: center;
}
.three {
    height: 25px;
    width: 25px;
    background-color: #F20;
    float: left;
    text-align: center;
}
.four {
    height: 50px;
    width: 200px;
    background-color: #C90;
    float: left;
    text-align: center;
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>

I need div 3 to go below div 2, so the left of div 4 pushed up against 2 and 3.

Result: http://i.imgur.com/N8VZ4HO.png

Thanks.

Upvotes: 0

Views: 27

Answers (4)

Dmitriy
Dmitriy

Reputation: 4503

.one {
    height: 50px;
    width: 200px;
    background-color: #F60;
    float: left;
    text-align: center;
}
.two {
    height: 25px;
    width: 25px;
    background-color: #6F0;
    float: left;
    text-align: center;
}
.three {
    height: 25px;
    width: 25px;
    background-color: #F20;
    float: left;
    text-align: center;    
}
.four {
    height: 50px;
    width: 200px;
    background-color: #C90;
    float: left;
    text-align: center;
}
.two+.three{
    margin-top: 25px;
    margin-left: -25px;
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>

Upvotes: 0

kiran
kiran

Reputation: 641

Try this:

.three {
  height: 25px;
  width: 25px;
  background-color: #F20;
  float: left;
  text-align: center;
  margin-top: 25px;
  margin-left: -25px;
}

DEMO

Upvotes: 0

Raza Hussain
Raza Hussain

Reputation: 762

Here is Demo HTML:

<div class="one">1</div>
<div class="box">
<div class="two">2</div>
<div class="three">3</div>
</div>
<div class="four">4</div>

CSS:

.one {
    height: 50px;
    width: 200px;
    background-color: #F60;
    float: left;
    text-align: center;
}
.two {
    height: 25px;
    width: 25px;
    background-color: #6F0;
    float: left;
    text-align: center;
}
.three {
    height: 25px;
    width: 25px;
    background-color: #F20;
    float: left;
    text-align: center;
}
.four {
    height: 50px;
    width: 200px;
    background-color: #C90;
    float: left;
    text-align: center;
}
.box{
    float: left;
    width:25px
}

https://jsfiddle.net/La9jd2y7/3/

Upvotes: 0

Joel Almeida
Joel Almeida

Reputation: 8037

Try this: 

.one {
    height: 50px;
    width: 200px;
    background-color: #F60;
    float: left;
    text-align: center;
}
.two {
    height: 50px;
    width: 25px;
    background-color: #6F0;
    float: left;
    text-align: center;
}
.two >div {
    height: 25px;
}
.four {
    height: 50px;
    width: 200px;
    background-color: #C90;
    float: left;
    text-align: center;
}
<div class="one">1</div>
<div class="two">
<div>2</div>
<div>3</div>
</div>
<div class="four">4</div>

So, as you notice I've changed the HTML to place the 2 and 3 inside the .two. That way you have 3 columns, and 2 and 3 are inside the middle column. No need for 4 columns.

Upvotes: 1

Related Questions