Search code examples
htmlcsspositioning

Positioning divs inside a container

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.

Solution

  • 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.