How can I separate two different divs? - html

Question

Basically, I used everything from break tags, to paddings and margins but nothing seems to work. My problem is on this image:
I can't seem to find a way to separate the "user profile div" and the "article on". I can post my CSS if you need it!
EDIT:
HTML:
<!-- begin user_panel -->
<div id="user_panel">
<!-- user_img -->
<div id="user_img">
<center><img src="images/avtr.png" alt="" title="Welcome, wallensteiN." /></center>
</div>
<!-- user_profile -->
<div id="user_profile">
<table>
<tr>
<td style="width: 300px; float: left;">
<h1>Welcome, wallensteiN.</h1>
<p> • Last visit: Dec 01, 2014; 15:30.<br> • You currently have <span class="online">5</span> friends online.<br> • Inbox - no new messages.<br> • Edit your profile.<br> • Chat with the community!<br> • Change password.<br> • Log out of this session.</p>
</td>
<td style="width: 500px; float: right;">
<h1>Latest activity on the website</h1>
<p> • wallensteiN commented in How to get better at DotA in 3 steps.<br> • Artzeezy commented in Interview with EG's Arteezy.<br> • NewsBot posted Interview with EG's Arteezy.<br> • NewsBot posted How to get better at DotA in 3 steeps.</p>
</td>
</tr>
</table>
</div>
</div>
<!-- end user_panel -->
<!-- begin content -->
<div id="content">
<!-- begin slider -->
<div id="slider">
</div>
<!-- end slider -->
<!-- begin article -->
<div id="article">
<h1>Welcome to "Shooter"</h1>
<p> • Enjoy this template!</p>
<h1>Interview with EG's Arteezy</h1>
<p> • Able an hope of body. Any nay shyness article matters own removal nothing his forming. Gay own additions education satisfied the perpetual. If he cause manor happy. Without farther she exposed saw man led. Along on happy could cease green oh.</p>
<p> • Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits county enough the figure former add. Do sang my he next mr soon. It merely waited do unable.</p>
<h1>How to become better at DotA in 3 steps</h1>
<p> • Yourself required no at thoughts delicate landlord it be. Branched dashwood do is whatever it. Farther be chapter at visited married in it pressed. By distrusts procuring be oh frankness existence believing instantly if. Doubtful on an juvenile as of servants insisted. Judge why maids led sir whose guest drift her point. Him comparison especially friendship was who sufficient attachment favourable how. Luckily but minutes ask picture man perhaps are inhabit. How her good all sang more why.</p>
<p> • Sense child do state to defer mr of forty. Become latter but nor abroad wisdom waited. Was delivered gentleman acuteness but daughters. In as of whole as match asked. Pleasure exertion put add entrance distance drawings. In equally matters showing greatly it as. Want name any wise are able park when. Saw vicinity judgment remember finished men throwing.</p>
</div>
<!-- end article -->
<!-- begin sidebar -->
<div id="sidebar">
</div>
<!-- end sidebar -->
</div>
<!-- end content -->
CSS
/* begin user panel */
#user_panel{
width: 1100px;
margin: 0 auto;
margin-top: 25px;
}
#user_panel #user_img{
width: 200px;
height: 200px;
float: left;
background: rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 10px solid #F90;
}
#user_panel #user_img img{
margin-top: 25px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 1px solid #111;
}
#user_panel #user_profile{
width: 850px;
height: 200px;
float: right;
background: rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 10px solid #F90;
}
#user_panel #user_profile a{
color: #F90;
}
#user_panel #user_profile a:hover{
color: #FFF;
}
#user_panel #user_profile h1{
font-family: Century Gothic;
font-size: 23px;
color: #FFF;
padding-left: 15px;
}
#user_panel #user_profile p{
font-family: Century Gothic;
font-size: 15px;
color: #FFF;
padding-left: 15px;
}
/* begin content */
#content{
width: 1065px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 10px solid #F90;
overflow: auto;
padding-left: 15px;
margin-bottom: 25px;
}
#content #slider{
}
#content #article{
float: left;
width: 700px;
}
#content #article h1{
width: 500px;
font-family: Century Gothic;
font-size: 23px;
border-bottom: 5px solid #F90;
}
#content #article p{
font-family: Century Gothic;
font-size: 15px;
color: #FFF;
}
Footer isn't finished yet!

Answer 1

Add the following CSS to create a margin:
#user_panel {
margin-bottom: 20px; /* <- Adjust this number to suit your needs */
}
And you'll see the separation between the divs you're seeking.
You assign a 0 margin to the top and bottom with margin: 0 auto; and then later give it a margin-top: 25px; which handles the top, but you never space the bottom. That's why it's appearing flush with the top panel.
EDIT
Working JSFiddle
The reason your margin declarations aren't working is that you've floated everything in your user_panel box, which causes it to collapse. The margins are there, but it's not taking up enough space in the DOM to push down the content div.
Add this CSS (a clearfix) and it'll work.
#user_panel:after {
content: '';
display: table;
clear: both;
}
Important! – Don't forget to add the original margin:
#user_panel {
margin-bottom: 25px;
}

Answer 2

I think your problem is that you are floating the user_panel but not the #content.
Can you float this?
if so use:
#content{
width: 1065px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 10px solid #F90;
overflow: auto;
padding-left: 15px;
margin-bottom: 25px;
float: left;
clear: both;
}
And also you need to add a clearfix to the user_panel
#user_panel:after {
content: "";
display: table;
clear: both;
}
here is the working fiddle:
http://jsfiddle.net/lee_gladding/95ovfh5g/