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內容/邊欄對齊

回答

相關問題