如何将大量文本的相对元素放置在高度不高的元素旁边，向左移动

我有一个页面，其中有一个向左和向右的菜单我有一个带有大量文本的新节。文本的位置正确，但是一旦文本低于左侧菜单的高度，文本就会位于左侧。如何将大量文本的相对元素放置在高度不高的元素旁边，向左移动

据我所知，这是因为该部分浮动（请纠正我，如果我错了）到左侧，并根据填充和边距进行定位。但是，如果我想在右侧保留文本的左侧垂直线，我该怎么办？如果我使用绝对定位，“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