CSS - how do I float another div over another without overlapping

Asked by
Hey I want to put that lower div box beside that upper box with details but when I try to position absolute it I goes down idk why (I made the parent div of all three divs as position rlative ) , how am I supposed to fix this or any other better way to do this .

Here is the screenshot - http://www.findportugal.com/Untitled.png

Div Description

 #user_panel - div around all the other divs ie parent div
 #user_details - div with details on top
 #user_photos - div with photo heading
 #user_current - div at the lower part
CSS :

 #user_panel 
 { 
 color: white; 
 position: relative; 
 }
 #user_details 
 { 
 padding: 0 0 30px 0; 
 }
 #user_details table 
 { 
 padding: 30px 20px 10px 30px; 
 border: 1px solid grey; 
 margin: 0 60px 0 40px
 }
 #user_details table tbody tr td#right 
 { 
 padding: 0 0 0 100px; 
 }
 #users_title 
 { 
 padding: 20px 0 0 50px; 
 }

 div#user_photos 
 { 
 width: 850px; 
 height: 230px; 
 border: 1px solid grey; 
 margin: 50px 0 0 40px;
 padding: 0 0 20px 20px; 
 }

 #user_current 
 {
 border: 1px solid grey; 
 width: 320px; 
 position: absolute; 
 }

Best Answer

Answer by
You want a div OVER another div and you are saying it should NOT OVERLAP which is not possible, instead decrease the size of upper div, use float: left; and this will let the div below shift besides the floated div

Also don't forget to clear floats, or you'll spend other 2 hours thinking what the hell is going on with the element positions as well as background color

And if you want to use position: absolute; than the div will overlap, so in this case, use position: relative; for the container element and than use position: absolute; with top right bottom left properties to set your element correctly.

Don't forget position: relative; else your absolute div will run wild in your page

Your Answer

Name:
Answer: