1

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.

user544079
  • 16,109
  • 42
  • 115
  • 171

5 Answers5

4

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;
}
BraedenP
  • 7,125
  • 4
  • 33
  • 42
  • @user Why did you ask the question then? :P – alex Apr 27 '11 at 01:50
  • I was wondering the same thing lol. Unless he meant "That's exactly the answer I was looking for." – BraedenP Apr 27 '11 at 01:50
  • SO isn't what it used to be :P a simple search for "div side by side" would've also yielded http://stackoverflow.com/questions/4938716/align-div-elements-side-by-side – jlmakes Apr 27 '11 at 01:58
2

Float #user1 and #user2.

jsFiddle.

alex
  • 479,566
  • 201
  • 878
  • 984
1

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.

jlmakes
  • 2,945
  • 1
  • 26
  • 38
0

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;
}
cgatian
  • 22,047
  • 9
  • 56
  • 76
0

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.

Chris Perkins
  • 799
  • 4
  • 8
  • If you set them as inline, they'll lose all of their padding and look like one blob of DIV lines :P – BraedenP Apr 27 '11 at 01:43