DIV位置發出

Question

我想我的DIV位置，如下

標誌/菜單/社會

介紹左/前奏右

backpicture

中東-1

左下/右下

的問題是，對於此刻的DIV顯示這樣的（見的jsfiddle http://jsfiddle.net/A4Sn8/1/）：

標誌/菜單

社會

backpicture

介紹左/前奏右

中東-1

左下角

右下角

總之，我的「社會」 DIV是下面的菜單中，而不是在其右側。右下DIV位於左下方，而不是右下方，後方位於Intro-left和intro-right之前，而不是之後。

我該如何解決這個問題？

非常感謝

HTML

<div id="logo">Logo</div> <!-- End DIV Logo --> 
    <div id="mainmenu"> 
    <ul> 
     <li> 
     <h5>Menu I</h5> 
     <ul> 
      <li><a title="" href="">Biography</a> </li> 
      <li><a title="" href="">Publications</a> </li> 
     </ul> 
     <li> 
     <h5>Menu 2</h5> 
     <ul> 
      <li><a title="" href="">Demo</a> </li> 
      <li><a title="" href="">Features</a> </li> 
      <li><a title="" href="">Comparison</a> </li> 
     </ul> 
     </li> 
     <li> 
     <h5>Menu 3</h5> 
     <ul> 
      <li><a title="" href="">Item 1</a> </li> 
      <li><a title="" href="">Item 2</a> </li> 
      <li><a title="" href="">Item 3</a> </li> 
     </ul> 
     </li> 
     <li> 
     <h5>Menu 4</h5> 
     <ul> 
      <li><a title="" href="">ddfd</a> </li> 
      <li><a title="" href="">dsfd</a> </li> 
     </ul> 
     </li> 
    </ul> 
    </div> <!-- End DIV Main Menu --> 
<div id="social">Social</div> 

    <div id="intro-left"></div> 

    <div id="intro-right"> 
    <div id="content-headline"><h1>Novitates autem si spem</h1></div> <!-- End DIV Content headline--> 
     <p>Novitates sit.</p> 

    </div> 

<div id="backpicture">backpicture</div> 
<div id="middle-1">Middle-1</div> 
<div id="bottom-left">bottom-left</div> 
<div id="bottom-right">bottom-right</div> 

CSS：

@charset"UTF-8"; 
/* CSS Document */ 

Html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    background: #fff; 
    font-family: 'Open Sans', sans-serif; 
} 

#logo { 
    position: absolute; 
    top: 35px; 
    left: 20px; 
    color: #000; 
    font-size: 20px; 
} 

/* mainmenu */ 

#mainmenu { 
    margin-top: 35px; 
    width: 100%; 
    padding-bottom: 10px; 
    overflow: hidden; 
} 
#mainmenu ul { 
    float: right; 
    margin: 0; 
    color: #000; 
    list-style: none; 
} 
#mainmenu ul li { 
    display: inline-block; 
    float: left; 
    width: 140px; 
    line-height: 20px; 
} 
#mainmenu>ul>li { 
    margin-left: 20px; 
} 
#mainmenu ul li a { 
    display: block; 
    text-decoration: none; 
    font-weight:600; 
    font-size: 12px; 
} 
#mainmenu ul li a, #mainmenu ul ul:hover li a { 
    color: #333; 
    -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -webkit-transition-duration: .4s, .4s, .4s, .4s; 
    -moz-transition-duration: .4s, .4s, .4s, .4s; 
    -ms-transition-duration: .4s, .4s, .4s, .4s; 
    -o-transition-duration: .4s, .4s, .4s, .4s; 
    transition-duration: .4s, .4s, .4s, .4s; 
    -webkit-transition-property: all, -webkit-transform; 
    -moz-transition-property: all, -moz-transform; 
    -ms-transition-property: all, -ms-transform; 
    -o-transition-property: all, -o-transform; 
    transition-property: all, transform; 
} 
#mainmenu ul ul li a:hover, #mainmenu ul ul li.current-menu-item a { 
    color: #005EBC; 
    -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -webkit-transition-duration: .4s, .4s, .4s, .4s; 
    -moz-transition-duration: .4s, .4s, .4s, .4s; 
    -ms-transition-duration: .4s, .4s, .4s, .4s; 
    -o-transition-duration: .4s, .4s, .4s, .4s; 
    transition-duration: .4s, .4s, .4s, .4s; 
    -webkit-transition-property: all, -webkit-transform; 
    -moz-transition-property: all, -moz-transform; 
    -ms-transition-property: all, -ms-transform; 
    -o-transition-property: all, -o-transform; 
    transition-property: all, transform; 
} 

social { 
    right: 10px; 
    Color: blue; 
} 

p { 
    color: #333; 
    font-weight:300; 
    font-size: 13px; 
} 
h1 { 
    color: #00539E; 
    font-size: 30px; 
    } 



#intro-left { 
    float: left; 
    width: 35%; 
} 

#intro-right { 
    float: right; 
    padding-right: 50px; 
    width: 60%; 
} 
#backpicture { 
    height:160px; 
    width: 100%; 
    background: blue; 
} 

#middle-1 { 
    width: 980px; 
    background: #c81919; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

#bottom-left { 
    float: left; 
    width: 35%; 
    background: #5421c2; 
} 

#bottom-right { 
    float: right; 
    padding-right: 50px; 
    width: 60%; 
    background: #2ec4a6; 

} 

Answer 1

對於主菜單，社會是在一條線：

#social { 
    float:right; 
    margin-top: 35px; 
    right: 10px; 
    color: blue; 
} 
#mainmenu { 
    float:left; 
    margin-top: 35px; 
    width: 80%; 
    padding-bottom: 10px; 
    overflow: hidden; 
} 

主要問題是width:100%給#mainmenu。這不允許social區塊來到它的權利。此外，在#mainmenu和float:right中指定float:left在social中伎倆。

還有一件事，在CSS didnt你social有#。

Answer 2

你是混合絕對像素大小和百分比CSS規則。這並不總是一個好主意。

你可能有這樣的問題，因爲你50像素的padding-right比的自由空間，剩下的5％的情況。

我不知道你想達到什麼樣的，但我猜底元素應該是相同的高度。試試這個：

#bottom-right { 
    float: right; 
    padding-right: 5%; /* you defined 50px instead! */ 
    width: 60%; 
    background: #2ec4a6; 
} 

樣品：http://jsfiddle.net/A4Sn8/2/