1

I want to make all divs side by side.

I mean remove the space form top of the #div3 and #div4.

I tried float and display:inline-block

my code :

    <div id="wrapper">
    <div id="div1">The first</div>
    <div id="div2">next to each other.</div>
    <div id="div3">The two divs are</div>
    <div id="div4">The two divs are</div>
</div>
#div1 {
    display: inline-block;
    width:220px;
    height:120px;
    border: 1px solid red;
}
#div2 {
    display: inline-block;
    width:260px;
    height:260px;
    border: 1px solid green;
}
#div3 {
    display: inline-block;
    width:100px;
    height:160px;
    border: 1px solid green;
}
#div4 {
    display: inline-block;
    width:100px;
    height:160px;
    border: 1px solid green;
}

http://jsfiddle.net/u5y6tuwm/

Michael Doye
  • 8,063
  • 5
  • 40
  • 56
Deosantess
  • 11
  • 2

3 Answers3

1

One solution is to use flex in the parent container:

#wrapper {
  display: flex;
  /*set display to flex*/
  margin-top: 20px;
}
#wrapper > div {
  margin-right: 10px;
  /*add some margin to the right to direct children div*/
}
#div1 {
  width: 220px;
  height: 120px;
  border: 1px solid red;
}
#div2 {
  width: 260px;
  height: 260px;
  border: 1px solid green;
}
#div3 {
  width: 100px;
  height: 160px;
  border: 1px solid green;
}
#div4 {
  width: 100px;
  height: 160px;
  border: 1px solid green;
}
<div id="wrapper">
  <div id="div1">The first</div>
  <div id="div2">next to each other.</div>
  <div id="div3">The two divs are</div>
  <div id="div4">The two divs are</div>
</div>
Alex Char
  • 32,879
  • 9
  • 49
  • 70
0
vertical-align: top;

to each div1, 2, 3 and 4

you can add this to affect all divs on the page

div {
    vertical-align: top;
}

or this for all divs within #wrapper div

#wrapper div {
    vertical-align: top;
}

or this to target each div you want ( 1-4 )

#div1, #div2, #div3, #div4 {
    vertical-align: top;
}

or to each one individually, or inline style and so on.

Hastig Zusammenstellen
  • 4,286
  • 3
  • 32
  • 45
  • Hmm, I think maybe you mean a masonry style layout, for if div 3 and 4 are below div 1 and 2? If so, the responses to the following question will help you learn about it.. http://stackoverflow.com/questions/12117195/masonry-style-layout-only-with-css > or here < http://stackoverflow.com/questions/19196082/bootstrap-how-to-stack-divs-of-different-heights?lq=1 – Hastig Zusammenstellen Apr 06 '15 at 11:21
0

You just need to add 

#div1, #div2, #div3, #div4 {
    float:left;
}

This will work perfectly. Also do not forget to clear the float after

Anuj Kumar
  • 458
  • 3
  • 13