3

For reference sake, I have read these questions and setting clear:both; ended up with creating a lot of mess-up instead of solving my problem.

Div content overlapping each other

responsive CSS divs overlap each other

CSS Divs overlapping each other

Divs overlapping

My CSS code:

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

And the HTML is thus:

<div id="menudiv">
    <img class="titleico" src="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/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>

The whole thing looks like this:

enter image description here

Community
  • 1
  • 1
Youstay Igo
  • 321
  • 2
  • 11
  • Your image and reference is with position absolute... so you should expected what you see – Luís P. A. Nov 23 '15 at 16:38
  • I want the sibar divs to align on the right side of the page. How can I do that without adding absolute position reference? – Youstay Igo Nov 23 '15 at 16:44
  • Can you upload a new image with what you want because i don´t understand what you want.. It will be responsive or not? – Luís P. A. Nov 23 '15 at 16:47
  • I want it responsive and I want the sidebar div (div.sidebar in the CSS code) to be on the right edge of the page (no matter what the resolution of the screen and display device). That is why I was using the absolute reference. – Youstay Igo Nov 23 '15 at 16:49

1 Answers1

0

When you set an element's position to absolute you're taking it out of the flow of the page. It will overlap content that is in the flow by definition. You'll need to take the div.sidebar's positioning off and maybe give it float: right

I don't typically use floats so float: right might not do exactly what you need but it will get you closer.

CaldwellYSR
  • 3,056
  • 5
  • 33
  • 50
  • 1
    Many thanks. This has solved my problem :) I wanted to align the div to the right side so I used the absolute reference. I have used float:right; and margin-right:25px; and it has given me the same results. The divs are not overlapping anymore. – Youstay Igo Nov 23 '15 at 16:47
  • @YoustayIgo be sure to accept this answer if it helped you. – CaldwellYSR Nov 23 '15 at 16:48
  • Done. I clicked the tick mark before too. But it told me I must wait 8 minutes before marking any answer as correct :D – Youstay Igo Nov 23 '15 at 16:50