Comment positionner les éléments relatifs avec beaucoup de texte à côté d'un élément qui n'est pas aussi haut, flottant à gauche

Question

J'ai une page où j'ai un menu à gauche et à droite J'ai une nouvelle section avec beaucoup de texte . Le texte est positionné correctement pour commencer, mais dès que le texte passe en dessous de la hauteur du menu de gauche, le texte est positionné plus à gauche. Je comprends que c'est parce que la section est flottante (corrigez-moi si je me trompe) vers la gauche et positionnée en fonction des paddings et des marges. Mais comment faire si je veux garder la ligne verticale gauche du texte dans ma section droite? Si j'utilise le positionnement absolu, le «pied de page» (qui est une autre div-section) est déplacé vers le haut et chevauche le texte. En définissant la hauteur du menu de gauche plus haut que le texte, j'obtiens une belle ligne de texte verticale, mais il est difficile de savoir où positionner la section de pied de page.

S'il vous plaît voir mon code ci-dessous. J'ai essayé de copier seulement ce qui est nécessaire, j'espère ne rien manquer.

Merci d'avance!

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

Eh bien, il a fallu moins d'une minute après l'envoi de la question avant ma mémoire accroché à nouveau et je Rember comment faire cela. La marge est la marge au conatiner parent tandis que le rembourrage juste à l'élément précédent. Donc, afin d'obtenir la belle ligne que je veux, j'ai simplement augmenté la marge de gauche à la taille appropriée. Cela fonctionne et j'espère que je l'ai expliqué correctement ...

Answer 2

Une autre méthode serait d'utiliser aucune marge/rembourrage du tout & flotter les deux éléments restants, de sorte qu'ils sont toujours assis côte à côte, indépendamment de la hauteur.

ressources Grand sur Flotteurs: http://www.westvalley.edu/common/tutorial/instruct/cssTutorial/index__1094.htm

Answer 3

En fait, si vous flottez, vous flotter que sur la partie de votre section flotte. Si vous voulez "réserver" cette zone, vous devez avoir display: inline-block. Cela se comporte comme un bloc div et un peu comme une portée en même temps.

je pourrais avoir changé beaucoup de choses, mais ici je posté un jsFiddle: http://jsfiddle.net/o9vLpbe4/

Assurez-vous que votre #maincontent.width + #subsections.width < #container.width, y compris les protections et d'autres choses. Et mis à zéro pour simplifier. Comme il se comporte comme une travée, il se cassera à l'autre ligne si les tailles ne tiennent pas dans la ligne. J'ai également mis #subsections et #maincontent à l'intérieur d'un div.