높이가 같지 않은 요소 옆에 많은 텍스트가있는 상대적 요소를 배치하는 방법, 왼쪽에 떠있는 것

왼쪽에 오른쪽 메뉴가 있고 텍스트가 많은 새 섹션이있는 페이지가 있습니다. . 텍스트의 시작 위치는 바르게 지정되어 있지만 텍스트가 왼쪽 메뉴의 높이보다 낮아지면 텍스트가 왼쪽에 더 많이 배치됩니다.높이가 같지 않은 요소 옆에 많은 텍스트가있는 상대적 요소를 배치하는 방법, 왼쪽에 떠있는 것

필자가 왼쪽에있는 섹션이 떠 다니고 있다고 생각합니다. 잘못된 것입니다. 패딩과 여백에 따라 배치되었습니다. 그러나 내 오른쪽 섹션에 텍스트의 왼쪽 수직선을 유지하려면 어떻게해야합니까? 절대 위치 지정을 사용하면 "footer"(다른 div 섹션)가 위쪽으로 이동하고 텍스트와 겹칩니다. 왼쪽 메뉴의 높이를 텍스트보다 높게 정의하면 멋진 세로줄이 생기지 만 푸터 섹션을 배치 할 위치를 아는 것은 어렵습니다.

아래 코드를 참조하십시오. 나는 필요한 것을 복사하려고했는데, 나는 아무것도 놓치지 않기를 바란다.

미리 감사드립니다.

HTML :

<div id="container"> 

<div id="subsections"> 

<h4>Games</h4> 

<ul id="subnav"> 
    <li><a href="games.html#theGame">The Game</a></li> 
</ul> 

</div><!-- END #subsections --> 

<hr /> 

<div id="maincontent"> 

<h3>Welcome</h3> 

<div id="welctext"> 

<p>Welcome to this site. Here you can find information about the applications that this company has developed. You can subscribe to information about new or updated applicaionts here.</p> 

<p>This company is a small company that focus on developing application that can be used on the a mobile device. Presently the focus is on iPhone. Here you can find out what applications that are available right now. More to come...</p> 

</div><!-- END #welctext --> 

</div><!-- END #maincontent --> 

<hr/> 

<div id="footer"> 

<p> &copy; Some company name</p> 

</div><!-- END #footer --> 

</div><!-- END #container --> 

</body> 
</html>

CSS : 음, 내 기억을 다시 엮은 나는이 작업을 수행하는 방법을 rember 전에 질문을 보낸 후 미만 1 분했다

body { 
    /*background-color: #333;*/ 
    /*background-color: #98310d;*/ 
    background-color: #d7e6f1; 
    background-image: url(../images/graphics/back-tile.jpg); 
    color: #4b5dcb; 
    font-family: "Apple Braille", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif; 
    font-size: 0.9em; 
    margin: 0; 
    padding: 0 0 0 0px; 
    /* IE auto center fix */ 
    text-align: left; 
} 

#container { 
    line-height: 1.6em; 
    margin: 0 auto 0 auto; 
    width: 720px; 
    padding: 20px 0px 0px 50px; 
    text-align: justify; 
    float: left; 
} 

#maincontent { 
    margin: 0px 0px 0px 50px; 
    padding: 0; 
} 

#subscribe { 
    margin: 0px 0px 0 220px; 
    padding: 0; 
    text-align: left; 
} 

#subsections { 
    float: left; 
    margin-bottom: 40px; 
    width: 220px; 
    /*height: 1300px;*/ 
} 

ul#subnav { 
    list-style: none; 
    margin: 0; 
    padding: 14px 0 0 10px; 
} 

div#footer { 
    border-top: 1px solid #FFF; 
    clear: both; 
    font-size: .75em; 
    line-height: 1.3em; 
    margin-bottom: 40px; 
    padding-bottom: 10px; 

} 

#welctext { 
    padding: 0 0 16px 0; 
}

출처

2010-02-11 Nicsoft