부모 열을 상속하여 자식 열을 길이가 같게 표시하는 방법

Question

한 열이 다른 열보다 높을 때 배경에 대해 걱정할 필요없이 두 열 레이아웃을 사용하고 싶습니다.

가짜 열, 액체 레이아웃에 대해 읽었지만 다음과 같이 작동하는지 묻고 싶습니다. 반투명 이미지가있는 "기본"요소가 배경 (16x17px)으로 있습니다. 주 요소는 2 개의 부동 열을 포함하고, 왼쪽 플로트는 왼쪽이고 오른쪽은 오른쪽 플로트합니다.

.main { 
width: 1024px; 
background-image: url(); 
padding:10px 0px 10px 0px; 
margin: 0 auto; 
} 
.colleft { 
float: left; 
width: 618px; 
padding:10px 5px 10px 10px; 
} 
.rightbar { 
margin: 0 auto; 
width: 50em; 
float: right; 
padding:10px 5px 10px 10px; 
width: 376px; 
} 
.titolo { 
text-align: center; 
font-family: ClaireHandRegular, Helvetica, sans-serif; 
font-size: 30px; 
color: #35231e; 
line-height: 100%; 
padding:10px 0px 0px 0px; 
} 
.contenuto { 
text-align: left; 
font-family: ClaireHandRegular, Helvetica, sans-serif; 
font-size: 25px; 
color: #35231e; 
line-height: 100%; 
padding:20px 0px 0px 0px; 
} 

내 HTML에 이상이 있으며 위치를 볼 수 없습니다. 나는 해결책에서 멀리 떨어져 있냐?

<div class="main"> 
    <div class="colleft"> 
     <div class="titolo">ARTICLES</div> 
     <div class="contenuto">CONTENT</div> 
    </div> 
    <div class="rightbar"> 
     <div class="contenuto">RIGHT BAR CONTENT</div> 
    </div> 
</div> 

사회자가 나에게 그의 권한을 부여하지 않는 한 나는, 실제 상황의 스크린 샷을 첨부 할 수 없습니다 ...

어떤 도움도 정말 감사합니다, 나는 가파른 학습 곡선의 시작 부분입니다! 실비아

Answer 1

jsfiddle 또는 유사하게 테스트 할 수 있습니다. 뿐만 아니라 firebug 또는 이와 유사합니다. 당신이 수레와 작업 할 때

, 당신은 당신의 수레를 포함해야합니다 : 귀하의 질문에 대해

.

그렇게하기 위해 여러 기술을 사용할 수 있습니다. 그중 간단한 것 :

overflow:hidden; float 컨테이너. 귀하의 경우, .main 클래스의 요소. 이 도움이

.main { 
width: 1024px; 
background-image: url(); 
padding:10px 0px 10px 0px; 
margin: 0 auto; 
background-color: red; //<-- added just to test. 
overflow:hidden; //<-- to contain the floats. 
} 

희망 :

이보십시오.