Html css div格式和对齐

如何对齐，使侧边栏和图片部分与主内容区域并排，没有空格

主导航

标题

图片区

主要地区。XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

侧边栏。侧边栏，侧边栏，侧边栏侧边栏侧边栏

页脚

您应该将主要内容和侧边栏内容包装在各自的

div

容器中，并将该容器设置为

float:left

。要删除空白，您需要删除添加到

p

标记的自然

边距

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>

所以你只需要选择左边的图片，然后将问题写得更清楚，以便其他人理解你的问题well@baros我得到了答案，但我需要检查我的答案是否正确，以便准确地说出你的问题我是CSS的新手，希望图片部分和侧边栏位于主要内容区域的右侧。但是我不喜欢主内容区域上下以及侧边栏和图片部分之间的空白。你的CSS在哪里？如果你什么都没试过，我们帮不了你。（很抱歉，我看到了你们的小提琴。用HTML发布CSS是很平常的。）非常感谢。这就解决了问题。@baros没问题。很乐意帮忙。你能检查一下这个问题是否解决了吗？
<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>

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
}