Div가 왼쪽으로 떠 있었고 div가 오른쪽으로 떠있어 배경이 사라졌습니다.

Question

왼쪽에 이미지가 떠 있었고 꼬리말 오른쪽에 더 많은 텍스트 (링크가있는 ul 인라인)가 있어야합니다.

footer { 
 
    clear: both; 
 
    background: #113551; 
 
    width: 90%; 
 
    margin: 0 auto; 
 
} 
 
.left-foot { 
 
    float: left; 
 
} 
 
.right-foot { 
 
    float: right; 
 
}

<footer> 
 
    <div class="left-foot"> 
 
     <p> derp 1</p> 
 
    </div> 
 

 
    <div class="right-foot"> 
 
     <p>derp2</p> 
 
    </div> 
 
</footer>

그것은 작동 틱 그러나 바닥 글의 배경색이 표시되지 않습니다 :

다음은 CSS & HTML입니다. 왜 안돼? 이 문제를 해결하는 가장 좋은 방법은 무엇입니까? 그것은 정확하게 반드시 이와 같을 필요는 없습니다. 나는 위치 상대적인 절대적으로 이것을 얻는 어떤 행운도 가지지 않고 있었다.

Answer 1

float 사용을 지우는 overflow:hidden

데모 - http://jsfiddle.net/b0v33rc0/1/

또는 추가 바닥 글의 태그를 닫기 전에 스타일 clear:both와 div

데모 - 나는 쓰기하려고했다 http://jsfiddle.net/b0v33rc0/2/

Answer 2

비토 리노 페르난데스 (Vitorino Fernandes)와 같은 글을 썼다.

그러나 다음과 같이 작성할 수도 있습니다.

HTML

<footer> 
<div> 
<p id="p1"> Derp1</p> 
<p id="p2> Derp2</p> 
</div> 
</footer> 

CSS는

footer{ 
    width:100%; 
    background: #113551; 
    } 

    footer > div{ 
    width:90%; 
    margin:auto; 
    } 

    #p1{ 
    float:left; 
    } 
    #p2{ 
    float:right; 
    } 

내가 뭘했던 것은 난 단지 <p>의 컨테이너로 한 div을 사용한다는 것입니다.