CODEWITHSUNDEEP
htmlcssoverlap
George
George

Reputation: 1

Stop div from side-scrolling in smaller-sized window. Overflow:hidden, wrapper div and fixed position don't work

I am fiddling with a website not created by me. On top of that I haven't coded in HTML/CSS in a LONG time. I'm having the issue of a side-menu (div's) horizontally overlapping over the div to it's right if the window is smaller than the body's width. I just want to prevent that from happening and continue with the vertical scrolling.

The problem is that there are quite a few divs inside this "menu"/side of the page div and some fancy stuff when the mouse hovers it. Is there a clean, easy way for a novice like me to just prevent the horizontal scroll when the browser window is smaller than the content? I've tried wrapping the whole body content and also setting all related divs to position:fixed, but it did not work. Any easy tips I could implement to solve this?

EDIT 2: I want to KEEP the scrollbar, I just don't want the div to move when I scroll.

EDIT: Posted the whole code, most of it is useless for the question, but since I don't know what could be useful, I posted it all. The issue is that "panel" is sliding above "entries" if the screen size is reduced.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<meta name="color:Background" content="#ffffff"/>
<meta name="color:text" content="#838282"/>
<meta name="color:link" content="#b8b8b8"/>
<meta name="color:link hover" content="#b8b8b8"/>
<meta name="color:title" content="#b8b8b8"/>
<meta name="color:sidelinks" content="#b8b8b8"/>
<meta name="color:sidelinks hover" content="#8b8b8"/>
<meta name="color:panel" content="#b8b8b8"/>

<meta name="image:background" content=""/>
<meta name="image:sidebar image" content=""/>
<meta name="image:sidebar background" content=""/>
<meta name="image:panel" content=""/>

<meta name="text:Custom Link One" content="" />
<meta name="text:Custom Link One Title" content="" />
<meta name="text:Custom Link Two" content="" />
<meta name="text:Custom Link Two Title" content="" />
<meta name="text:Custom Link Three" content="" />
<meta name="text:Custom Link Three Title" content="" />


<meta name="color:scroll" content= />

<meta name="color:scrollbg" content= />

<meta name="if:Webkit Scrollbar" content="1" />

<style type="text/css">


a {color:;text-decoration:none;-webkit-transition: all 0.7s ease-out;-moz-transition: all 0.7s ease-out;transition: all 0.7s ease-out;}

.fufu {width:227px;-webkit-transition: all 0.7s ease-out;-moz-transition: all 0.7s ease-out;transition: all 0.7s ease-out;}

.fufu:hover {-webkit-transform: translate(1em,0);-moz-transform: translate(1em,0);-o-transform: translate(1em,0);}


html{
    display:table;
    margin:auto;
}

body {
    background: {color:Background} url("{image:Background}") no-repeat;
    margin:auto;
    color:{color:text};
    font-family: 'News Cycle', sans-serif;
    font-size:11px;
    line-height:100%;
    letter-spacing:1px;
    vertical-align:middle;
}

a {
    text-decoration:none;
    outline:none;
    -moz-outline-style:none;
    color:{color:link};
}


a{
    text-decoration:none;
    color:{color:link};
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    }

a:hover {
    color:{color:link hover};
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    }

img {
    border:none;
}

blockquote {
    padding-left:5px;
    border-left:2px solid;
}
    
blockquote blockquote {
    padding-left:5px;
    border-left:2px solid;
}

h1 {
    font-size:15px;
}


#top_div{
    display: block;
    background-color: #d8d8d8;
    margin-left:auto;
    margin-right: auto;
    margin-bottom:0px;
    z-index:11;
    background-image: url("blah");
}
#top_menu{
    display: block;
    background-color: #d8d8d8;
    margin-left:auto;
    margin-right: auto;
    margin-bottom:0px;
    margin-top:300px;
    float:left;
    z-index:10;
    background-image: url("");
}

#entries {
    padding:0px;
    width:530px;
    margin-left:470px;
    margin-top:20px;
    overflow:hidden;
    font-weight:normal;
    z-index=1;
  
}

    
#post {
    width:500px;
    padding-top:0px;
    padding-left:0px;
    padding-right:0px;
    padding-bottom:15px;
    margin-bottom:0px;
    margin-left:0px;
    border-top: solid 11px #7e0925; 
    overflow:hidden;
    
   
}


#title {
    opacity:0;
    width:220px;
    position:fixed;
    margin-top:90px;
    margin-left:-100px;
    font-size:15px;
    font-family: 'Vivaldi';
    font-weight: bold;
    text-align:center;
    padding-bottom:0px;
    color:{color:title};
    line-height:100%;
    z-index:20;
    transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
}


#panel:hover #title{
    text-shadow: 1px 1px 1px #9a9a9a;
    opacity:1;
    width:270px;
    position:fixed;
    margin-top:-30px;
    margin-left:-120px;
    font-size:25px;
    font-family: 'Vivaldi';
    font-weight: bold;
    text-align:center;
    padding-bottom:0px;
    color:{color:title};
    z-index:0;
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;  
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}
  

#sidebar {
    width:216px;
    height:250px;
    position:fixed;
    margin-left:5px;
    margin-top:50px;
    text-align:center;
    font-size:11px;
    line-height:110%;
    font-family: 'Voltaire', sans-serif;
    z-index:1;
}

#panel{
    float:left;
    position:fixed;
    display:block;
    margin-top:25px;
    margin-left:0px;
    margin-right:0px;
    padding-left:0px;
    width:222px;
    height:762px;
    background:{color:panel} url("{image:panel}") no-repeat;
    z-index:1;
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;  
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}

#panel:hover{
    position:fixed;
    margin-top:12px;
    margin-left:0px;
    padding-left:0px;
    width:222px;
    height:762px;
    z-index:10;
    background: {color:panel}:
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;  
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}

#panel:hover #sidebarimage{
    position:fixed;
    width: 200px;
    margin-left:5px;
    margin-top:0px;
    opacity:0;
    padding:0px;
    z-index:3;
    border: solid 1px #fff; 
    outline: solid 2px #D8D8D8; 
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;  
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}

#panelbackground{
    opacity:0;
    position:fixed;
    margin-top:0px;
    margin-left:-178px;
    width:222px;
    height:762px;
    background:url("{image:panel}") no-repeat;
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;  
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-delay: .1s;
    -moz-transition-delay: .1s; 
    -webkit-transition-delay: .1s; 
    -o-transition-delay: .1s; 
}

#panel:hover #panelbackground{
    opacity:1;
    position:fixed;
    margin-top:0px;
    margin-left:-178px;
    width:222px;
    height:762px;
    background:url("{image:panel}") no-repeat;
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;  
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}

#sidebarimage {
    width: 200px;
    height:200px;
    margin-left:5px;
    margin-top:-38px;
    padding-bottom:0px;
    opacity:1;
    z-index:3;
    border: solid 1px #fff; 
    outline: solid 0px #D8D8D8; 
   transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;  
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}

#sidebarimage img {
    width:200px; 
     transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;  
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}

.top{
    position:fixed;
    opacity:1;
    margin-top:270px;
    margin-left:190px;
    width:50px;
    height:50px;
    border-radius:10px;
    position:absolute;
    z-index: -5; 
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;  
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}

#navigation{
    position:fixed;
    font-family: 'News Cycle', sans-serif;
    font-size:8px;
    margin-left:-70px;
    text-align:center;
    padding:2px;
    margin-top:-55px;
    width:40px;
    border:none;
}

#navigation:hover{
    position:fixed;
    margin-left: -70px;
}

div.button{
    width: 85px;
}


div.button a{
    margin-top:0px;
    text-align: center;
    padding-top:8px;
    padding-bottom:0px;
    padding-left:0px;
    padding-right:0px;
    color: #fff;
    position:relative;
    background:none;
    z-index:2;
    width: 85px;
    height:25px;
    border-style:none;
    border-right:solid 10px;
    border-right-color: rgba(110,110,110,0.4);
    border-bottom:solid 1px {color:background};
    border-bottom-color:;
    display: inline-block;
    text-transform:uppercase;
    transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
}

div.button a:hover{
    text-align: center;
    padding-top:8px;
    padding-bottom:3px;
    padding-left:10px;
    padding-right:10px;
    color: {color:sidelinks hover};
    position:relative;
    background: rgba(0, 0, 0, .8);
    z-index:2;
    width: 60px;
    height:25px;
    border-style:none;
    border-right:solid 12px {color:background};
    border-bottom:solid 1px {color:background};
    display: inline-block;
    text-transform:uppercase;
    transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
}
    
#description {
    box-shadow: 1px 1px 1px #2a2a2a;
    opacity:0;
    font-family: 'News Cycle', sans-serif;
    width:165px;
    padding:5px;
    background:{color:background};
    color: #D8D8D8;
    background: rgba(0, 0, 0, .4);
    text-align:center;
    position:fixed;
    margin-top:217px;
    margin-left:-65px;
    line-height:120%;
    font-size:8px;
    letter-spacing:1px;
    text-transform:uppercase;
    line-height: 15px;
    transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    
}
#panel:hover #description {
    opacity:1;
    transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;
    -o-transition-duration: 0.6s
    transition-delay: .2s;
    -moz-transition-delay: .2s; 
    -webkit-transition-delay: .2s; 
    -o-transition-delay: .2s; 
}

#pagination {
    margin-top:0px;
    margin-left:0px;
    font-family:Calibri;
    font-size:10px;
    text-align:center;
    background:none;
    color:{color:link};
    text-transform:uppercase;
    font-style:oblique;
}


#quote{
    padding-top:5px;
    font-family:georgia;
    position:absolute;
    font-size:38px;
    margin-left:-3px;
}

.info{
    padding:2px;
    margin-left:515px;
    margin-top:-10px;
    position:absolute;
    font-size:9px;
    width:80px;
    text-align:left;
    opacity:0;
    background: none;
    transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    word-wrap:break-word;
}

#post:hover .info {
    padding:2px;
    position:absolute;
    font-size:9px;
    width:80px;
    margin-left:512px;
    margin-top:-5px;
    text-align:left;
    opacity:1;
    transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    z-index:3;
    word-wrap:break-word;
}

#post img{
    display: block;
    margin: auto;
}

#post p{
    padding-left:5px;
    padding-right:5px;
    line-height: 18px;
    font-size: 11.5px;
}

ol.notes {
    padding: 0px;
    margin: 25px 0px;
    list-style-type: none;
    border-bottom: solid 1px #ccc;
}

ol.notes li.note {
    border-top: solid 1px #ccc;
    padding: 10px;
}

ol.notes li.note img.avatar {
    vertical-align: -4px;
    margin-right: 10px;
    width: 16px;
    height: 16px;
}

ol.notes li.note span.action {
    font-weight: bold;
}

ol.notes li.note .answer_content {
    font-weight: normal;
}

ol.notes li.note blockquote {
    border-color: #eee;
    padding: 4px 10px;
    margin: 10px 0px 0px 25px;
}

ol.notes li.note blockquote a {
    text-decoration: none;
}

#asker {
    float:left;
    margin-right:5px;
  
}

.bubble {align:right;background: #eee; margin:7px 0px 5px 66px;padding:10px;position: relative;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.bubble p {margin:1px 0px;}
.bubble span {display:block;position:absolute;width:1px;height:1px;font-size: 0;line-height: 1px;left:-10px;top:10px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:10px solid #eee;}

.askborder {float: left;margin: 1px 4px 0 0;padding: 2px; background: #eee}

#audioplayer { 
width:30px;
height:30px;
overflow:hidden;
position:absolute;
margin-top:37px;
margin-bottom:45px;
margin-left:34px;
z-index:2;
opacity:0.5;
transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;  
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
}

#audioplayer:hover { 
    width:30px;
    height:30px;
    overflow:hidden;
    position:absolute;
    margin-top:37px;
    margin-bottom:45px;
    margin-left:34px;
    z-index:2;
    opacity:1;
    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;  
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
}

#albumart2 {
    width:100px;
    height:100px;
    float:left;
    padding-right:5px;
    position:relative;}
 
#albumart2 img {
    width:100px;
    height:100px;
    float:left;
    
}
#albumart {
    width:100px;
    height:100px;
    float:left;
    margin-left:-105px;
    padding-right:5px;
    position:relative;}
 
#albumart img {
    width:100px;
    height:100px;
    float:left;
    
}

.chat{
    background: #ffffff;
    margin: 0; 
    font-size:11px;
    font-family: 'News Cycle', sans-serif;
}

.chat.chat1 {
    margin-left: 0px;
}
.chat .chat1 .chat2 {
    background: # ffffff;
    color:{color:text};
    margin-bottom: 1px; 
    padding: 4px 4px 5px 5px;
    border-style:none;
}

.chat2 {
    background:#D8D8D8;
    color:{color:text};
    margin-bottom: 1px; 
    padding: 4px 4px 5px 5px;
    border-style:none;
}
.chat .chat1 .chat2.even {
    background: #ffffff; 
    color: {color:text};
} 
.chat .chat1 .chat2 span {font-weight: bold;}

#credit {
    margin-top:0px;
    position:fixed;
    width:80px;
    right:0px;
    bottom:3px;
    left:40px
    line-height:5px;
    letter-spacing:0px;
    font:10px trebuchet ms;
    color: {color:text};
    text-transform:uppercase;
    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;  
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
}

#credit:hover{
    margin-top:0px;
    position:fixed;
    width:80px;
    right:0px;
    bottom:9px;
    line-height:5px;
    letter-spacing:0px;
    font:10px trebuchet ms;
    color: {color:text};
    text-transform:uppercase;
    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;  
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
}

#menuTop{
    margin-top: 0px;
    margin-left: 225px;
    display:block;
    float:left;
    
    
}


#top_description{
    background-color: ;
    float: left;
    margin-top: 265px;
    margin-bottom: 10px;
    display:block;
}

#top_description li{
    background-color: ;
    text-shadow: 1px 1px 1px #000;
    display:block;
}

#top_text{
    margin-left: 240px;
    margin-bottom:25px;
    float:left;
    display:block;
    font-size: 13px;
    line-height: 20pt;
    text-align: center;
}


{block:ifWebkitScrollbar}

::-webkit-scrollbar {width: 3px; height:5px; background:{color:scrollbg};}

::-webkit-scrollbar-corner {background:{color:scroll};}

::-webkit-scrollbar-thumb:vertical {background:{color:scroll}; }

::-webkit-scrollbar-thumb:horizontal {background:{color:scroll};}

{/block:ifWebkitScrollbar}



{CustomCSS}</style></head><body>


<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>



<link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'>


<link href='http://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Seaweed+Script' rel='stylesheet' type='text/css'>

<a href=""></a><div id="top_div" style="width: 1200px; height: 300px"></a>
    
    

<div id="top_description" style="width: 1200px; height: 35px">
    <div id="menuTop" style="width: 770px; height: 35px">
        <style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 35px;
    
}

li {
    float: left;
    height: 35px;
    
    
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 12px 14px;
    text-decoration: ;
    font-size: 15px;
    font-family: "Palatino Linotype", palatino, serif;
}

li a:hover {
    background-color:rgba(126,9,37,0.35);
    height: 10px;
    color: #fff;
    
}

li a:after {
    display:block;
    content:'';
    width:100%;
    height:4px;
    background:#7e0925;
    margin-top:7px;
  }
</style>

<ul>
  <li><a href="blah">Who?</a></li>
  <li><a href="blah">Ask</a></li>
  <li><a href="blah">Submit</a></li>
  <li><a href="blah">Original Posts</a></li>
  <li><a href="blah">Disclaimer</a></li>
</ul>
           
    </div>
    
    
</div>


<div id="top_text" style="width: 735px; height: 195px">
    <p>
</>




<div id="panel">
<div id="panelbackground"><img width="400px"<img src="{image:sidebar background}"></div>
<div id="sidebar">


<div class="top"><div id="navigation"><div class="button" style="background-color: rgba(0,0,0,0.3);">
<a href="blah">who am i?</a>
<a href="blah">ask me</a>
<a href="blah">submit</a>
<a href="blah">my posts</a>
<a href="blah">disclaimer</a>

{block:IfCustomLinkOneTitle}<a href="{text:Custom Link One}">{text:Custom Link One Title}</a>{/block:ifCustomLinkOneTitle}

{block:ifCustomLinkTwoTitle}<a href="{text:Custom Link Two}">{text:Custom Link Two Title}</a>{/block:ifCustomLinkTwoTitle}

{block:ifCustomLinkThreeTitle}<a href="{text:Custom Link Three}">{text:Custom Link Three Title}</a>{/block:ifCustomLinkThreeTitle}<div id="pagination">
{block:Pagination}
            {block:NextPage}
                <a href="{NextPage}">Next</a>
            {/block:NextPage}
            {block:PreviousPage}
                <a href="{PreviousPage}">Prev</a>
            {/block:PreviousPage}
        {/block:Pagination}
</div>
</div></div></div>



<div id="title">{Title}</div><link href='http://fonts.googleapis.com/css?family=Anaheim' rel='stylesheet' type='text/css'>



<div id="sidebarimage"><img width="200px"height="200px""<img src="{image:sidebar image}"></div>


<div id="description">{description}</div>





</div>
</div>
</div>



<div id="credit"><a target="blank"href="http://accioloki.tumblr.com"><font color="{color:text}">© accioloki </a></font></div>

<div id="entries">{block:Posts}

<div id="post">



<div class="info">posted {TimeAgo} {block:RebloggedFrom} | <a href="{ReblogParentURL}" title="via"> via </a> | {block:ContentSource}<a href="{SourceURL}" title="©"> © </a>{/block:ContentSource}{/block:RebloggedFrom} | <a href="{Permalink}">
{NoteCount}</a>{block:HasTags}{block:Tags} #<a href="{TagURL}">{Tag}</a>{/block:Tags}{/block:HasTags}</div>


{block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text} 

{block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo} 

{block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}

{block:Quote}<div id="quote">“</div>&nbsp;&nbsp;&nbsp;&nbsp;{Quote}<br>
{block:Source}<div align="right">— {Source}</div>{/block:Source}
    {/block:Quote} 

{block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link} 

<div class="chat">
<div class="chat1">
{Block:Lines}
<div class="chat2 {Alt}">
{Block:Label}
<span>{Label}</span>
{/block:Label} 
{Line}</div>
{/block:Lines}
    
</div>
</div>



{block:Audio}
<div id= "audioplayer">{AudioPlayerGrey}</div>
<div id="albumart2"><img src="http://static.tumblr.com/4wyqgof/Dyvm2qmp1/default.jpg"></div>{block:AlbumArt}<div id="albumart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
<br>{block:Artist}
{Artist}
{/block:Artist}
{block:TrackName}
{TrackName}
{/block:TrackName}
{block:Album}
{Album}
{/block:Album}
{block:Caption}{Caption}{/block:Caption}{/block:Audio} 

{block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video} 

{block:Answer}<img src="{AskerPortraitURL-48}" align="left" class="askborder"><div class="bubble"><span></span>{Asker}: {Question}&nbsp;</div>{Answer}{/block:Answer}


</div>




{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:Posts}</div>

</body></html>

Upvotes: 0

Views: 91

Answers (1)

Robin Lundquist
Robin Lundquist

Reputation: 9

Look up "overflow:hidden;" on google. That removes the scrollbar

Upvotes: 1

Related Questions