CODEWITHSUNDEEP
htmlcss
Nabil
Nabil

Reputation: 317

How to prevent overlapping content during window resizing

I have a little problem -- I have two div on left and right, as my screen resolution is 1280*768, they work fine here. but when I reduce the window size it overlaps each other ... like left one is reduce in width and right one make that happen ...

here is my code..

<div class="shareBar" align="right">
        ......
 </div> 
<div class="content">     
    .....   
 </div>

and my css code is here

.content{
    position:relative;
    margin: 110px 5px 10px 5px;
    min-width:700px;

    }


.shareBar{
    position:relative;
}

here shareBar overlaps content...

And I want to make this shareBar always in a static position and when window re-size occurs a horizontal scroll-bar should appears so that content will always in in a static size. Or otherwise shareBar should reside under content. Is it possible with pure css?

Upvotes: 0

Views: 4178

Answers (1)

ASGM
ASGM

Reputation: 11381

If you want to make .sharebar appear in the same place and provoke a horizontal scrollbar on window resize, you should remove align="right" from the HTML give it position:absolute as well as a specified location in the CSS. For example:

.shareBar{
    position:absolute;
    left:900px;
}

Upvotes: 1

Related Questions