CODEWITHSUNDEEP
htmlcss-floatcss
NakedCat
NakedCat

Reputation: 860

Inline blocks not aligning properly

I have a problem with three divs that should align so that two divs (div1 and div2) are on the left and one div (div3, that's as tall as combined div1 and div2) is on the right. I am not sure how to resolve it and I wouldn't like to use floats, as the third div should be just next to those two divs, not jsut floated to the right.

HTML:

<div class="container">
<div class="test1">
</div>
<div class="test3">
</div>
<div class="test2">
</div>
</div>

CSS:

.container {
    width:260px;
}

.test1 {
    display:inline-block;
    vertical-align:top;
    width:200px;
    height:50px;
    background-color:red;
}
.test2 {
    display:inline-block;
    vertical-align:top;
    width:200px;
    height:50px;
    background-color:blue;
}
.test3 {
    display:inline-block;
    width:50px;
    height:100px;
    background-color:black;
}

Here's the fiddle: Fiddle

Could you please help me with this? It can be done with a different technique, but those elements have to stick together, not just be floated, because when I make it responsive then floated elements will separate.

Upvotes: 0

Views: 93

Answers (4)

Pedro Amaral Couto
Pedro Amaral Couto

Reputation: 2125

Try this change:

.test3 {
        display:inline-block;
        width:50px;
        height:100px;
        background-color:black;
        margin-bottom: -50%;
        vertical-align: top;
    }

http://jsfiddle.net/xyfryc2j/

Maybe you can also use "position: absolute", if the sizes are fixed:

.container {
    position: relative; width: 250px; height: 100px;
}
.test1 {
    position: absolute; top: 0; left: 0;
    width:200px;
    height:50px;
    background-color:red;
}
.test2 {
    position: absolute; bottom: 0; left: 0;
    width:200px;
    height:50px;
    background-color:blue;
}
.test3 {
    position: absolute; top: 0; right: 0;
    width:50px;
    height:100px;
    background-color:black;
}

http://jsfiddle.net/nmg4ek3j/1/

You can also use floats for your purpose:

.container {
    width: 250px;
}
.test1 {
    float: left;
    width:200px;
    height:50px;
    background-color:red;
}
.test2 {
    float: left;
    width:200px;
    height:50px;
    background-color:blue;
}
.test3 {
    float: right;
    width:50px;
    height:100px;
    background-color:black;
}

http://jsfiddle.net/rjwg6w9h/1/

Upvotes: 0

Kisiou
Kisiou

Reputation: 51

Have you tried with negative margin-bottom for div3 and vertical-align: middle for other divs ?

Just add 

margin-bottom: -50px;

My code here: jsfiddle

Upvotes: 0

Fabio Manzo
Fabio Manzo

Reputation: 36

<div class="container">
<div class="test1">
</div>
<div class="test3">
</div>
<div class="test2">
</div>
</div>
<style>
.test2 {
display: inline-block;
width: 200px;
height: 50px;
background-color: blue;
}
.test1 {
display: inline-block;
width: 196px;
height: 50px;
background-color: red;
}
.test3 {
width: 50px;
height: 100px;
background-color: black;
display: inline-block;
}
</style>

Upvotes: 0

N Kumar
N Kumar

Reputation: 1312

You can use position property 

.test1
{
position:absolute;
top:0;
left:0;
width:200px;
height:50px;
background-color:red;
}
.test2
{
position:absolute;
top:50px;
left:0;
width:200px;
height:50px;
background-color:blue;
}
.test3
{
position:absolute;
top:0;
left:200px;
width:50px;
height:100px;
background-color:black;
}

IMPORTANT
Dont Forget to set its parent position relative 

.container {
width:260px;
position:relative;
margin:10px;
}

Upvotes: 2

Related Questions