1 Vote Vote

Getting DIVs to Line Up

Posted by topdog 643 days ago Questions| margin div divs All
Hi all,

I am building a site and am roughing in the layout. What I am trying to accomplish is to get three DIVs to display in a row without dropping down or spilling out of the parent DIV. I can almost taste it but I am out of ideas. At first the right most DIV "User3" wouldn't even stay inside the parent div. I tried everything in the CSS and finally changed the order in the HTML making the middle DIV last in the order.

Here is the relevant CSS:
CODE
#Users{
background-color: #AFDAD9;
min-height: 15%;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
    
#User1{
width: 280px;
padding: 5px;
float: left;
margin-left: 5px;
margin-bottom: 5px;
margin-top: 5px;
min-height: 10%;
background-color: #82AAA8;
}

#User2{
width: 280px;
padding: 5px;
margin-bottom: 5px;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
min-height: 10%;
background-color: #82AAA8;
}

#User3{
width: 280px;
Padding: 5px;
float: right;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
min-height: 10%;
background-color: #82AAA8;
}


And Here is the HTML:
CODE
<div id="Users">      
    <div id="User1" align="center">User 1</div>      
    <div id="User3" align="center">User 3</div>
    <div id="User2" align="center">User 2</div>
</div>


The Result is this:


Note that User1 and User3 drop while User2 seems to ignore its top margin value.

Help?
Discuss Bury


Who Voted for this Question