如何將大量文本的相對元素放置在高度不高的元素旁邊，向左移動

我有一個頁面，其中有一個向左和向右的菜單我有一個帶有大量文本的新節。文本的位置正確，但是一旦文本低於左側菜單的高度，文本就會位於左側。如何將大量文本的相對元素放置在高度不高的元素旁邊，向左移動

據我所知，這是因爲該部分浮動（請糾正我，如果我錯了）到左側，並根據填充和邊距進行定位。但是，如果我想在右側保留文本的左側垂直線，我該怎麼辦？如果我使用絕對定位，「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：

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