css div formatting and alignment - html

Question

How do I align as so that the sidebar and picture section run alongside the main content area with NO white spaces
JsFiddle
<div id="page-container">
<div id="mainnavigationarea">
<p>Main Navigation</p>
</div>
<div id="rosaheadersection">
<p>Header</p>
</div>
<div id="rosapicturesection">
<p>Picture Section</p>
</div>
<div id="rosachiefcontent">
<p>Main Area. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p>
</div>
<div id="rosasidebar-a">
<p>Sidebar.Sidebar,Sidebar, Sidebar SidebarSidebarSidebarSidebarSidebarSidebar</p>
</div>
<div id="rosafooter">
<p>footer</p>
</div>
</div>

Answer 1

You should wrap your main content and the sidebar content in their own div container and set that container to float:left. To remove the whitespace you need to remove the natural margin that's added to p tags.
HTML
<div id="page-container">
<div id="mainnavigationarea">
<p>Main Navigation</p>
</div>
<div id="rosaheadersection">
<p>SM Tool</p>
</div>
<div class="left-container">
<div id="rosachiefcontent">
<p>Main Area. This sets the definition titles (our individual nav item containers) to float left, which stacks them left to right, instead of one under the other. Main Area. This sets the definition titles (our individual nav item containers) to float left, which stacks them left to right, instead of one under the other. Main Area. This sets the definition titles (our individual nav item containers) to float left, which stacks them left to right, instead of one under the other.</p>
</div>
</div>
<div class="right-container">
<div id="rosapicturesection">
<p>Picture Section</p>
</div>
<div id="rosasidebar-a">
<p>Sidebar.Sidebar,Sidebar, Sidebar SidebarSidebarSidebarSidebarSidebarSidebar</p>
</div>
</div>
<div id="rosafooter">
<p>footer</p>
</div>
</div>
CSS
html,body{
margin: 0;
padding: 0;
}
p{
margin: 0;
}
.left-container{
float: left;
width:980px;
}
.right-container{
float: left;
width: 280px;
}
#rosafooter {
clear: both;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #3e5667;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}
#mainnavigationarea {
height: 150px;
background: #999;
}
#rosaheadersection {
height: 150px;
background: #7ac0da;
}
#rosapicturesection {
height: 150px;
background: yellow;
width: 280px;
}
#rosasidebar-a {
width: 280px;
background:#3e5667
}
#rosachiefcontent h2 {
margin: 0;
padding: 0;
}
#rosachiefcontent p {
margin: 0;
padding: 50px;
}
#rosachiefcontent {
clear: both;
overflow:auto;
margin-right: 280px;
background:#a6dbed;
width:980px;
vertical-align:top
}
#page-container {
width: 1260px;
margin: auto;
background:#fff
}
FIDDLE