CODEWITHSUNDEEP
htmlcss
Tiwenty
Tiwenty

Reputation: 763

Align two inline-blocks next to another inline-block

I want to align two inline-blocks next to another inline-block so that there is a big square and two smaller squares that are on its right. The two little squares should make a column, and this column should be next to the big square.

So I firstly added the big square, with a float:left and the first little square. Then I thought that when I add the last square, it will put it below the first little square. But no, it put it to the right of the first little square.

Here is an example: http://jsfiddle.net/BMYHw/2/ and the code:

HTML

<div id="i1"></div>
<div id="i2"></div>
<div id="i3"></div>

CSS

#i1 {
    background-color: blue;
    width:140px;
    height:140px;
    display: inline-block;
    float:left;
}
#i2 {
    background-color: green;
    width:70px;
    height:70px;
    display: inline-block;
}
#i3 {
    background-color: red;
    width:70px;
    height:70px;
    display: inline-block;
}

So all I want is that the red square in the example goes just below the green one and stick to the blue one. Thanks!

EDIT: Problem solved, thank you everyone for your really quick answers!

Upvotes: 1

Views: 2132

Answers (3)

scarecrow
scarecrow

Reputation: 6864

put the two small squares inside a new container. ie.

<div id="container> <!--the two small squares--> </div>

sample fiddle

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105853

http://jsfiddle.net/BMYHw/6/ you need an extra container to hold them. floatting or inline-block

.hold {
    display: inline-block;
    vertical-align:top;
    width:50px;
}

Upvotes: 1

Nitesh
Nitesh

Reputation: 15739

Use display:table; property to achieve this.

WORKING EXAMPLE

The Code:

#i2 {
    background-color: green;
    width:70px;
    height:70px;
    display: table;
}

This solves your purpose of ..

I want is that the red square in the example goes just below the green one and stick to the blue one.

Hope this Helps.

Upvotes: 2

Related Questions