HTML/CSS内容/边栏对齐

我想创建一个简单的网站，内容div和侧边栏div，但侧边栏div在我的内容div中推动某些东西，尽管它在外面。我相信这是一个简单的解决方案，但很难搜索这个确切的场景。HTML/CSS内容/边栏对齐

我在这里创建了一个jsfiddle，http://jsfiddle.net/WRs7L/。

<body> 
    <div id="wrapper"> 
    <div id="main"> 
     <div id="sidebar"></div> 
     <div id="content"> 
     <div id="resume"> 
      <section id="employment" class="part"> 
      <h2>Employment</h2> 
       <section class="item"> 
       <div class="info cf"> 
       <div class="left"> 
      <span class="title">Title</span> 
      <span class="employer">Employer</span> 
      <span class="group">Group</span>     
       </div> 
       <div class="right"> 
      <span class="dates">Date</span> 
      <span class="location">Location</span>    
       </div>  
        <div style="clear: both;"></div> 
       </div> 
       <div class="content"> 
       <ul> 
        <li>Item 1</li> 
        <li>Item 2</li> 
        <li>Item 3</li> 
       </ul> 
       </div> 
      </section>  
      </section>  
     </div> 
     </div> 
    </div> 
    </div> 
</body>

来源

2013-03-17 dvreed77

你需要看看你希望并排坐在两个div的宽度和高度。

我认为你的问题是你没有指定宽度/高度的元素，你想坐在侧边栏旁边。例如，如果你有一个网页，它在宽度1000像素，您将创建两个div如

<div id="side1"></div> 
<div id="side2"></div>

然后应用CSS来使他们并肩而坐：

#side1 
    { 
    width:49%; 
    height:500px; 
    float:left 
    margin-right:1%; 
    clear:none; 
    } 

#side2 { 
    width:50%; 
    height:500px; 
    float:left; 
    clear:none; 
    }

来源

2013-03-17 21:21:28 unknown

我指定的宽度在我的真实代码中，我仍然遇到这些相同的问题。我只是想把最小的代码复制到我的问题上。 JSFiddle链接更好地展示了我的意思。 – dvreed77 2013-03-17 21:36:10

HTML/CSS内容/边栏对齐

回答

相关问题