CODEWITHSUNDEEP
htmlcss
user544079
user544079

Reputation: 16629

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.

Upvotes: 1

Views: 156

Answers (5)

cgatian
cgatian

Reputation: 22984

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;
}

Upvotes: 0

jlmakes
jlmakes

Reputation: 2965

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.

Upvotes: 1

Chris Perkins
Chris Perkins

Reputation: 809

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.

Upvotes: 0

alex
alex

Reputation: 490153

Float #user1 and #user2.

jsFiddle.

Upvotes: 2

BraedenP
BraedenP

Reputation: 7215

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;
}

Upvotes: 4

Related Questions