float left right right bottom

Question

私は親divをrelativeに設定し、他は絶対と50％幅に設定しますが、jsfiddleでもそれが機能していないことが示されます。私は何が欠けていますか？

http://jsfiddle.net/kagawa_leah/3gcV9/1/

HTML：

<div class="border"> 
     <div class="left"> 
      <p>LEFT Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. </p> 
     </div> <!--end left--> 
     <div class="right"> 
      <p> RIGHT Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. </p> 
     </div> <!--end right--> 
    </div> <!--end border --> 

CSS：あなたは絶対配置要素をフロートさせることはできません

.border { 
position: relative; 
height: 100px; 
background-color: #000000; 
} 

.left {position: absolute; 
width: 50%; 
float:left; 
text-align:left; 
bottom: 4px; 
background-color:red; 
} 

.right {position: absolute; 
width: 50%; 
float:right; text-align:right; 
bottom: 4px; 
background-color: blue; 
} 

Answer 1

。おそらく、各要素にright/leftを設定するだけです。 http://jsfiddle.net/ByVGf/1/

.border { 
position: relative; 
height: 100px; 
background-color: #000000; 
} 

.left {position: absolute; 
width: 50%; 
left: 0 
text-align:left; 
bottom: 4px; 
background-color:red; 
} 

.right {position: absolute; 
width: 50%; 
right: 0; 
text-align:right; 
bottom: 4px; 
background-color: blue; 
} 

Answer 2

私はあなたが等しい半分に親を分割する2つのdivを持つようにしたいと仮定します。ここでは例のフィドルです。

.border { 

position: relative; 
height: 100px; 
background-color: #000000; 
} 

.sth { 
width: 50%; 
float:left; 
text-align:left; 
bottom: 4px; 
background-color:red; 
} 




<div class="border"> 
     <div class="sth"> 
      <p>LEFT Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. </p> 
     </div> <!--end left--> 
     <div class="sth"> 
      <p> RIGHT Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. </p> 
     </div> <!--end right--> 
    </div> <!--end border --> 

これは http://jsfiddle.net/b2pC3/