div alignment issue

I have 2 divs nested inside a bigger div as

<div id="site-wrapper">
   <div id="user1"></div>
   <div id="user2"></div>
<div>

The css is

#site-wrapper{
    border: 1px solid;
width: 800px;
min-height: 600px;
margin-left: 开发者_开发知识库auto;
margin-right: auto;
}
#user1{
border: 1px solid;
width: 200px;
min-height: 100px;
 }  
#user2{
border: 1px solid;
width: 200px;
min-height: 100px;
}

They are appearing one below the other. How do i get them on the same level at the side of each other.

---

Since DIVs are block elements by default, you need to "float" them to allow them to be horizontally-arranged. I've added the floats to each of the two divs below:

#site-wrapper{
    border: 1px solid;
width: 800px;
min-height: 600px;
margin-left: auto;
margin-right: auto;
}
#user1{
border: 1px solid;
width: 200px;
min-height: 100px;
float:left;
 }  
#user2{
border: 1px solid;
width: 200px;
min-height: 100px;
float:left;
}

---

Float #user1 and #user2.

jsFiddle.

---

Adding the below would work:

#site-wrapper div {
    float : left;
}

Keep in mine your floated elements have fixed widths--that's important, as you may get unexpected results if you don't explicitly define the width of floated elements.

To read more about the behavior of visual formatting elements, see here.

---

Add float:left; to the CSS for #user1

Alternately, you can add display:inline to the two user divs, but it is very likely that in the future you will need display:block on one or both of those, and so then you'd have to resort back to the float.

---

Try adding the float property.

user1
{
border: 1px solid;
width: 200px;
min-height: 100px;
float:left;
}  
user2{
border: 1px solid;
width: 200px;
min-height: 100px;
float:left;
}