將元素放在div的右側

Question

我想知道如何將這些div放到白色div的右側。 http://prntscr.com/5jmm6q

正如你所看到的，它堆疊在左邊的div下面，我希望它位於右上方。 當我使用float：正確的，這裏是我得到： http://prntscr.com/5jmo1p

這不是我想要的：/

這裏是我的CSS代碼：

#leftmenu { 
    margin-left:5px; 
    margin-top:5px; 
    height:auto; 
    width:150px; 
    background-color:gray; 
    padding:2px; 
} 

#leftmenu .titlebox { 
    height:20px; 
    width:150px; 
    background-color:black; 
} 

#leftmenu .titlebox .text { 
    margin-left:10px; 
    font-family:OswaldL; 
    font-size:14px; 
    color:white; 
} 

/*Now, here is the part that I want to move to the upper right side*/ 

#rightmenu { 
    margin-left:5px; 
    margin-top:5px; 
    height:auto; 
    width:250px; 
    background-color:gray; 
    padding:2px; 
} 

#rightmenu .titlebox { 
    height:20px; 
    width:250px; 
    background-color:black; 
} 

#rightmenu .titlebox .text { 
    margin-left:10px; 
    font-family:OswaldL; 
    font-size:14px; 
    color:white; 
} 

這裏是HTML ：

<div id="base"> 
    <section style="color: black;"> 
     <div id="leftmenu"> 
      <div class="titlebox"><div class="text"><?php echo NOM_SITE;?></div></div> 
      <ul> 
       <li><a href="#">DATA</a></li> 
       <li><a href="#">DATA</a></li> 
       <li><a href="#">DATA</a></li> 
      </ul> 
     </div> 


     <div id="leftmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <ul> 
       <li><a href="#">DATA</a></li> 
       <li><a href="#">DATA</a></li> 
      </ul> 
      </div> 

     <div id="leftmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <ul> 
       <li><a href="#">DATA</a></li> 
      </ul> 
      </div> 



     <div id="rightmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <div class="droite_text"> 
       <li><a href="forum.php?id=1">DATA</a></li> 
      </div> 
     </div> 

     <div id="rightmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <div class="droite_text"> 
      DATA 
      </div> 
     </div> 

謝謝。 :)

Answer 1

位變化

<div id="base"> 
    <section style="color: black;"> 
     <!-- added new div here --> 
    <div class="leftMain"><div id="leftmenu"> 
      <div class="titlebox"><div class="text"><?php echo NOM_SITE;?></div></div> 
      <ul> 
       <li><a href="#">DATA</a></li> 
       <li><a href="#">DATA</a></li> 
       <li><a href="#">DATA</a></li> 
      </ul> 
     </div> 


     <div id="leftmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <ul> 
       <li><a href="#">DATA</a></li> 
       <li><a href="#">DATA</a></li> 
      </ul> 
      </div> 

     <div id="leftmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <ul> 
       <li><a href="#">DATA</a></li> 
      </ul> 
      </div> 

     </div> 

     <div id="rightmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <div class="droite_text"> 
       <li><a href="forum.php?id=1">DATA</a></li> 
      </div> 
     </div> 

     <div id="rightmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <div class="droite_text"> 
      DATA 
      </div> 
     </div> 

CSS改變

.leftMain{ 
    float:left; 
    } 
#rightmenu { 
    float:right; 
    } 

http://jsfiddle.net/2oqbh17L/1/

Answer 2

例如，你應該把你想要的所有東西放在一個容器#left上，然後添加float：留給它。一切你想有擺正在#right並添加浮動：權

而且你有一些錯誤代碼（例如許多元素與#leftmenu ID - ID應該是潮頭

這裏是小提琴http://jsfiddle.net/rwspycft/1/

Answer 3

您需要浮動的那些元素。然而，如果你把它們飄浮他們將流出公文流轉我想嘗試用亂搞：。

clear: both; 

和/或

overflow: hidden; 

http://jsfiddle.net/afgmyw4t/

點擊我已經重新創建你的問題的jsfiddle。我把元素向左和向右漂浮。然後補充明確：兩者;在左側的元素上，以保持它們在文檔流中。他們可能需要一些樣式調整，如果您有任何問題，請留下評論。

Answer 4

在這裏你可以看到這個例子。 http://jsfiddle.net/fL5gg70o/

#leftmenu { 
float:left; 
} 

而對於右格：

#rightmenu { 
float:right; 
} 

Answer 5

你可以環繞單獨的div菜單和設置兩個浮動性。在HTML

.rightt { 
    float: right; 
    vertical-align: text-top; 
    margin: 0 auto; 
    width: 50%; 
} 

.leftt { 
    float: left; 
    width: 50%; 
} 

<div id="base"> 
    <section style="color: black;"> 
     <div class='leftt'> 
     <div id="leftmenu"> 
      <div class="titlebox"><div class="text"><?php echo NOM_SITE;?></div></div> 
      <ul> 
       <li><a href="#">DATA</a></li> 
       <li><a href="#">DATA</a></li> 
       <li><a href="#">DATA</a></li> 
      </ul> 
     </div> 


     <div id="leftmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <ul> 
       <li><a href="#">DATA</a></li> 
       <li><a href="#">DATA</a></li> 
      </ul> 
      </div> 

     <div id="leftmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <ul> 
       <li><a href="#">DATA</a></li> 
      </ul> 
      </div> 
</div> 

<div class='rightt'> 
     <div id="rightmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <div class="droite_text"> 
       <li><a href="forum.php?id=1">DATA</a></li> 
      </div> 
     </div> 
     <div id="rightmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <div class="droite_text"> 
      DATA 
      </div> 
     </div> 
     </div> 

FIDDLE