How to position relative elements with lots of text next to an element that are not as high, floating left

I have a page where I have a menu to the left and to the right I have a new section with a lot of text. The text is positioned correc开发者_JAVA技巧tly to start with, but as soon as the text goes below the left menu's height, the text is positioned more to the left.

I understand that this is because the section is floating (please correct me if I'm wrong) to the left and positioned according to paddings and margins. But how do I do if I want to keep the left vertical line of the text in my right section? If I use absolute positioning, the "footer" (which is another div-section) is moved way up and overlaps the text. By defining the height of the left menu as higher than than the text, I do get a nice vertical text-line, but it's difficult to know where to position the footer section.

Please see my code below. I tried to copy only what's needed, hope I didn't miss anything.

Thanks in advance!

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;
}

Well, it took less then one minute after sending the question before my memory hooked up again and I rember how to do this. Margin is the margin to the parent conatiner while padding just to the preceeding element. So, in order to get the nice line I want I just increased the left margin to appropriate size. It works and I hope I explained it correctly...

Another method would be to use no margins / padding at all & float both of the elements left, so they always sit side by side, regardless of height.

Great resource on Floats: http://www.westvalley.edu/common/tutorial/instruct/cssTutorial/index__1094.htm

Actually if you float, you float only on the portion your section floats. If you want to "reserve" that area, you actually need to have display: inline-block. That behaves as a block div and somewhat like a span at same time.

I might have changed a lot of stuff, but here i posted a jsfiddle: http://jsfiddle.net/o9vLpbe4/

Make sure your #maincontent.width + #subsections.width < #container.width, including padding and stuff. And zeroed it all for simplification. Since it behaves like a span, it will break to the other line if sizes don't fit in the line.

I also put #subsections and #maincontent inside a div.