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

Question

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

Answer 1

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

Answer 2

I'm assuming you want to place that lower div box in the empty space to the right of the upper-left div box, and not actually overlapping the other box? If so, you would be better off using floats.
You haven't shown your html, so let's assume the upper-left box has an id of "details", the bottom box has an id of "current-pic", and the full-width box in the middle in your screenshot as an id of "photos". A starting point for building the layout would then be like the following.
EDITED: Sorry, I wrote the answer before you updated your question with your HTML. The code is rewritten below to show the ids in your original html.
The HTML could be:
<div id="user_details"></div>
<div id="user_current"></div>
<div id="user_photos"></div>
The basic layout CSS would be something like:
#user_details {
float: left;
width: 50%;
box-sizing: border-box;
/* other styling stuff like padding, etc. */
}
#user_current {
float: right;
width: 50%;
box-sizing: border-box;
/* other styling stuff like padding, etc. */
}
#user_photos {
clear: both;
}
This doesn't account for any of the content inside the boxes, or spacing between the boxes, but the box-sizing rule will help you to maintain your layout and build up margins, padding, and borders without them breaking it.