Positioning divs inside a container

Question

I have a general, possibly beginner question about HTML.

#container {
  height: 200px;
  max-width: 600px;
  border: 1px solid black;
  margin: auto;
  margin-top: 10px;
}
#item1 {
  height: 100px;
  max-width: 200px;
  border: 1px solid red;
}
#item2 {
  height: 100px;
  max-width: 200px;
  border: 1px solid blue;
}

<div id="container">
  <div id="item1"></div>
  <div id="item2"></div>
</div>

My question is, why do #item1 and #item2 divs go underneath each other as opposed to next to each other? Isn't it true that they are no longer block-level elements because I have specified a set width for them? Why are they not lined up next to each other inside of #container? The #container has more than enough width to accommodate both items.

Note: This is strictly for learning/curiosity. I know that I can use margins and positioning to place them where I want to. However, I'm just curious as to why it behaves this way.

Thanks.

Even if you have set their widths, their property remains same as block. What you have to do is make them display:inline-block, then they will stand next to each other as you want — Saurabh Sonawane, Aug 02 '16 at 06:49
Possible duplicate of [What is the difference between display: inline and display: inline-block?](http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block) — Vucko, Aug 02 '16 at 06:51

score 1 · Accepted Answer · answered Aug 02 '16 at 06:58

1

Div elements are block elements, unless you specify the display property to inline or inline-block it wont align to to the right like other inline elements do.

adding display : inline-block to the css of div's will give you what you want.

answered Aug 02 '16 at 06:58

John Roca

1,204
1
14
27

score 1 · Answer 2 · answered Aug 02 '16 at 07:05

You have two ways to place you blocks horizontally: display property or float property.

It doesn't matter that you have set width to your elements. They are still block and displayed vertically. To change this behaviour, use stylesheet (note that in both cases width, not max-width should be set):

#container {
  height: 200px;
  max-width: 600px;
  border: 1px solid black;
  margin: auto;
  margin-top: 10px;
}
#item1 {
  height: 100px;
  width: 200px;
  border: 1px solid red;
  display: inline-block;
}
#item2 {
  height: 100px;
  width: 200px;
  border: 1px solid blue;
  display: inline-block;
}

or this:

#container {
  height: 200px;
  max-width: 600px;
  border: 1px solid black;
  margin: auto;
  margin-top: 10px;
}
#item1 {
  height: 100px;
  width: 200px;
  border: 1px solid red;
  float: left;
}
#item2 {
  height: 100px;
  width: 200px;
  border: 1px solid blue;
  float: left;
}

When using float it works perfectly. I'm just curious as to why there is a small gap between each div when using inline-block? — Zzgooloo, Aug 02 '16 at 07:15
It is because of line-break in html code between divs. Remove line-break and you will see no gap. Also u can use negative **margin-left**. Also you can find a couple of methods to escape this gap in google. I don't remember them all :-) — Alexander Lisitsyn, Aug 02 '16 at 07:17
Right, yea i was just curious about the cause of it because I had set no margins. Thank you. — Zzgooloo, Aug 02 '16 at 07:20

score 0 · Answer 3 · answered Aug 02 '16 at 06:53

0

<div> tag always start with new line if you are not using frameworks like bootstrap or other. If you want to see multiple items in single line then add css like display: inline-block

answered Aug 02 '16 at 06:53

Laxminarayan

188
2
16

score 0 · Answer 4 · edited Dec 24 '16 at 05:07

0

Please replace your class like below.

#item1{
    height:100px;
    max-width:200px;
    border:1px solid red;
    display:inline-block;
}
#item2{
    height:100px;
    max-width:200px;
    border:1px solid blue;
    display:inline-block;
}

edited Dec 24 '16 at 05:07

Pang

9,564
146
81
122

answered Aug 02 '16 at 06:56

Kiran Khatri

97
8

Thanks I understand. When I do this though, I get a bit of space in between each div (#item1, #item2) why is this? – Zzgooloo Aug 02 '16 at 07:09
It is solved, it was because of the gap in the HTML code in between the divs. I had no idea that would actually affect the outcome. – Zzgooloo Aug 02 '16 at 07:20

score 0 · Answer 5 · edited Aug 02 '16 at 07:06

0

The #container ie you div has a display property of block. This is a default property if you don't set it to anything else. In your case the div takes this default display property.

To view #item1 and #item2 side by side just use display: inline-block in your #container.

edited Aug 02 '16 at 07:06

swiftBoy

35,607
26
136
135

answered Aug 02 '16 at 06:58

Ashwin Patil

34
3

score 0 · Answer 6 · answered Aug 02 '16 at 06:59

0

just add float:left; property in child divs or display:inline-block; https://jsfiddle.net/8tvn0kw6/5/

answered Aug 02 '16 at 06:59

Friend

506
4
10

score 0 · Answer 7 · answered Aug 02 '16 at 07:03

div is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can. Other common block-level elements are p and form, and new in HTML5 are header, footer, section, and more.

Even if you specify width it wont allow other elements right next to it. This the property of block level element.

Use the css inline-block it will occupy the specified width or content width.

https://developer.mozilla.org/en-US/docs/CSS/display

score 0 · Answer 8 · answered Aug 02 '16 at 07:04

0

The height of the container should be the sum of heights of the child divs and the heights of the borders of the children

ie., height of parent container = 100+ 100+ 1+ 1+ 1+ 1 = 204px

#container {
 height: 204px;
}

answered Aug 02 '16 at 07:04

Syam Pillai

4,967
2
26
42

even when using box-sizing: border-box ? – Zzgooloo Aug 02 '16 at 07:16

Positioning divs inside a container

8 Answers8