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

Question

Hello,

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 correctly 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 (pls 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;
}

Answer 1

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...

Answer 2

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