Conteneur div chevauchant l'enfant horizontalement - html, css

Pour des raisons de référence, j'ai lu ces questions dans un cadre clair: les deux; fini par créer beaucoup de gâchis au lieu de résoudre mon problème.

Contenu div qui se chevauchent

divs CSS sensibles se chevauchent

Les divisions CSS se chevauchent

Divs qui se chevauchent

Mon code CSS:

#menudiv{              /*this is the leftmost div*/
margin:auto;
width:20%;
padding:1px;
float:left;
font-family:ubuntu;
font-size:25px;
color:#404040;
}

#content{             /*this is the middle div*/
position:relative;
}

div.sidebar{           */this is the right side div*/
position:absolute;
right:25px;
padding:5px;
font-family:verdana;
font-size:10pt;
width:300px;
border:solid 2px #a0b0c0;
display:flex;
text-align:justify;
}

Et le HTML est donc:

<div id="menudiv">
<img class="titleico" src="/images/images/home.png" /> &nbsp; &nbsp; HOME<br />
<ul id="menulist">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</div>
<div id="content"><p>Here is some text which does not overlap with the child div anyway.</p>

<div class="sidebar"><img src="/images/images/taoismlogo.png" width="80" height="80" />The yin-yang sign.</div>

<p>The text here (if it is long enough) overlaps on the content of sidebar div.</p>
</div>
</div>

Le tout ressemble à ceci:

Réponses:

Lorsque vous définissez un élément "s position à absolute vous le retirez du flux de la page. Il recouvrira par définition le contenu du flux. Vous devrez supprimer le positionnement de la div.sidebar et lui donner éventuellement float: right

Je n’utilise généralement pas de flotteurs float: right peut ne pas faire exactement ce dont vous avez besoin, mais cela vous rapprochera.