html & css unwanted horizontal overflow, if page becomes too wide vertically -
i have content box, contains standard lorem ipsum text. page looks should: 
but when add more content content box becomes wide vertically, reason page becomes wide horizontally: 
code(html):
<!-- copyright © 2015 enter|elysium --> <!-- template made joonas coatanéa --> <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content="this enter|elysium theme."> <meta name="keywords" content="enter|elysium,theme"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript" src="js/navbarcontroller.js"></script> <title>enter|elysium - welcome!</title> </head> <body> <div id="responsivecontainer"> <a class="nfx" href="#" alt="enterelysium"> <p class="logotext">e<span class="sfsize">nter</span>e<span class="sfsize">lysium</span></p> <img id="enterelysiumlogo" src="images/enterelysiumlogo.png" width="149" height="111" alt="enterelysium"/> </a> <a class="nfx" href="https://www.youtube.com/user/enterelysium" alt="watch videos" target="new"> <img id="youtube" align="right" src="images/youtube-icon.png" width="50" height="36" alt="watch videos"/> </a> <a class="nfx" href="http://www.twitch.tv/enterelysium" alt="watch streams" target="new"> <img id="twitch" align="right" src="images/twitch-icon.png" width="50" height="51" alt="watch streams"/> </a> <a class="nfx" href="https://www.facebook.com/enterelysiumyt" alt="follow me on facebook" target="new"> <img id="facebook" align="right" src="images/facebook-icon.png" width="40" height="40" alt="follow me on facebook"/> </a> <a class="nfx" href="https://twitter.com/enterelysium" alt="follow me on twitter" target="new"> <img id="twitter" align="right" src="images/twitter-icon.png" width="50" height="50" alt="follow me on twitter"/> </a> <a class="nfx" href="https://plus.google.com/+enterelysium/posts" alt="follow me on google+" target="new"> <img id="googleplus" align="right" src="images/googleplus-icon.png" width="40" height="40" alt="follow me on google+"/> </a> <a class="nfx" href="https://www.patreon.com/enterelysium" alt="support me on patreon" target="new"> <img id="patreon" align="right" src="images/patreon-icon.png" width="40" height="40" alt="support me on patreon"/> </a> <div id="navbar"> <ul> <li><a class="activenava" href="#">active navbar element</a></li> <li><a class="nava" href="#">navbar element</a></li> <li><a class="nava" href="#">navbar element</a></li> <li><a class="nava" href="#">navbar element</a></li> </ul> </div> <div id="sitecontent"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus maximus turpis id justo viverra accumsan. suspendisse non porta turpis. etiam auctor iaculis nunc, dignissim leo porta eu. maecenas sit amet sem ac odio mollis blandit condimentum et lacus. in bibendum felis non enim tempor, id lobortis nisl convallis. donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus maximus turpis id justo viverra accumsan. suspendisse non porta turpis. etiam auctor iaculis nunc, dignissim leo porta eu. maecenas sit amet sem ac odio mollis blandit condimentum et lacus. in bibendum felis non enim tempor, id lobortis nisl convallis. donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus maximus turpis id justo viverra accumsan. suspendisse non porta turpis. etiam auctor iaculis nunc, dignissim leo porta eu. maecenas sit amet sem ac odio mollis blandit condimentum et lacus. in bibendum felis non enim tempor, id lobortis nisl convallis. donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus maximus turpis id justo viverra accumsan. suspendisse non porta turpis. etiam auctor iaculis nunc, dignissim leo porta eu. maecenas sit amet sem ac odio mollis blandit condimentum et lacus. in bibendum felis non enim tempor, id lobortis nisl convallis. donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus maximus turpis id justo viverra accumsan. suspendisse non porta turpis. etiam auctor iaculis nunc, dignissim leo porta eu. maecenas sit amet sem ac odio mollis blandit condimentum et lacus. in bibendum felis non enim tempor, id lobortis nisl convallis. donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus maximus turpis id justo viverra accumsan. suspendisse non porta turpis. etiam auctor iaculis nunc, dignissim leo porta eu. maecenas sit amet sem ac odio mollis blandit condimentum et lacus. in bibendum felis non enim tempor, id lobortis nisl convallis. donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus maximus turpis id justo viverra accumsan. suspendisse non porta turpis. etiam auctor iaculis nunc, dignissim leo porta eu. maecenas sit amet sem ac odio mollis blandit condimentum et lacus. in bibendum felis non enim tempor, id lobortis nisl convallis. donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus maximus turpis id justo viverra accumsan. suspendisse non porta turpis. etiam auctor iaculis nunc, dignissim leo porta eu. maecenas sit amet sem ac odio mollis blandit condimentum et lacus. in bibendum felis non enim tempor, id lobortis nisl convallis. donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus maximus turpis id justo viverra accumsan. suspendisse non porta turpis. etiam auctor iaculis nunc, dignissim leo porta eu. maecenas sit amet sem ac odio mollis blandit condimentum et lacus. in bibendum felis non enim tempor, id lobortis nisl convallis. donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus maximus turpis id justo viverra accumsan. suspendisse non porta turpis. etiam auctor iaculis nunc, dignissim leo porta eu. maecenas sit amet sem ac odio mollis blandit condimentum et lacus. in bibendum felis non enim tempor, id lobortis nisl convallis. donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus maximus turpis id justo viverra accumsan. suspendisse non porta turpis. etiam auctor iaculis nunc, dignissim leo porta eu. maecenas sit amet sem ac odio mollis blandit condimentum et lacus. in bibendum felis non enim tempor, id lobortis nisl convallis. donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus maximus turpis id justo viverra accumsan. suspendisse non porta turpis. etiam auctor iaculis nunc, dignissim leo porta eu. maecenas sit amet sem ac odio mollis blandit condimentum et lacus. in bibendum felis non enim tempor, id lobortis nisl convallis. donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus maximus turpis id justo viverra accumsan. suspendisse non porta turpis. etiam auctor iaculis nunc, dignissim leo porta eu. maecenas sit amet sem ac odio mollis blandit condimentum et lacus. in bibendum felis non enim tempor, id lobortis nisl convallis. donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus maximus turpis id justo viverra accumsan. suspendisse non porta turpis. etiam auctor iaculis nunc, dignissim leo porta eu. maecenas sit amet sem ac odio mollis blandit condimentum et lacus. in bibendum felis non enim tempor, id lobortis nisl convallis. donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.</p> </div> </div> </body> </html> code(css):
/* copyright © 2015 enter|elysium */ /* template made joonas coatanéa */ /* fonts section */ @font-face { font-family: sourcesansprobold; src: url(../fonts/sourcesanspro-bold.otf); } @font-face { font-family: sourcesansproregular; src: url(../fonts/sourcesanspro-regular.otf); } /* end of fonts section */ /* not change code below, if not sure of doing! */ *, body { margin: 0; padding: 0; } /* not change code above, if not sure of doing! */ /* website background color section */ body { background-color: #005399; } /* end of website background color section */ /* not change code below, if not sure of doing! */ #responsivecontainer { width: 100vw; } /* not change code above, if not sure of doing! */ /* logo section */ .logotext { color: #ffffff; font-family: sourcesansprobold; font-size: 70px; text-shadow: 0px 4px 0px #000000; display: inline; } .sfsize { font-size: 50px; } #enterelysiumlogo { margin-top: 50px; margin-bottom: -15px; } /* end of logo section */ /* navbar section */ #navbar { height: 40px; background-color: #ffffff; box-shadow: 0px 2px 0px #000000; width: 100vw; } #navbar ul { list-style-type: none; text-align: center; } #navbar ul li { display: inline; vertical-align: middle; line-height: 40px; margin-left: 5px; margin-right: 5px; } /* end of navbar section */ /* website icons section */ #youtube { margin-top: 120px; transition: height 0.5s, width 0.5s; -moz-transition: height 0.5s, width 0.5s; -webkit-transition: height 0.5s, width 0.5s; -o-transition: height 0.5s, width 0.5s; } #youtube:hover { width: 40px; height: 29px; } #twitch { margin-top: 113px; transition: height 0.5s, width 0.5s; -moz-transition: height 0.5s, width 0.5s; -webkit-transition: height 0.5s, width 0.5s; -o-transition: height 0.5s, width 0.5s; } #twitch:hover { width: 40px; height: 41px; } #facebook { margin-top: 116px; transition: height 0.5s, width 0.5s; -moz-transition: height 0.5s, width 0.5s; -webkit-transition: height 0.5s, width 0.5s; -o-transition: height 0.5s, width 0.5s; } #facebook:hover { width: 30px; height: 30px; } #twitter { margin-top: 116px; transition: height 0.5s, width 0.5s; -moz-transition: height 0.5s, width 0.5s; -webkit-transition: height 0.5s, width 0.5s; -o-transition: height 0.5s, width 0.5s; } #twitter:hover { width: 40px; height: 40px; } #googleplus { margin-top: 117px; transition: height 0.5s, width 0.5s; -moz-transition: height 0.5s, width 0.5s; -webkit-transition: height 0.5s, width 0.5s; -o-transition: height 0.5s, width 0.5s; } #googleplus:hover { width: 30px; height: 30px; } #patreon { margin-top: 118px; margin-right: 8px; transition: height 0.5s, width 0.5s; -moz-transition: height 0.5s, width 0.5s; -webkit-transition: height 0.5s, width 0.5s; -o-transition: height 0.5s, width 0.5s; } #patreon:hover { width: 30px; height: 30px; } /* end of website icons section */ /* link section */ .nfx { text-decoration: none; } .activenava { background-color: #01345e; padding-top: 11px; padding-bottom: 10px; padding-left: 5px; padding-right: 5px; text-decoration: none; color: #005399; font-family: sourcesansproregular; transition: background-color 0.5s; -moz-transition: background-color 0.5s; -webkit-transition: background-color 0.5s; -o-transition: background-color 0.5s; } .activenava:hover { background-color: #004680; } .activenava:visited { color: #005399; } .nava { background-color: #e0e0e0; padding-top: 10px; padding-bottom: 9px; padding-left: 5px; padding-right: 5px; text-decoration: none; color: #005399; font-family: sourcesansproregular; transition: background-color 0.5s; -moz-transition: background-color 0.5s; -webkit-transition: background-color 0.5s; -o-transition: background-color 0.5s; } .nava:hover { background-color: #01345e; } .nava:visited { color: #005399; } /* end of link section */ /* site content section */ #sitecontent { background-color: #fff; width: 50%; margin: 0 auto; margin-top: 80px; text-align: center; font-family: sourcesansproregular; box-shadow: 0px 1px 10px #000000; margin-bottom: 50px; } /* end of site content section */
do not use 100vw units container width, vw uses size of viewport, without including scrollbar. changed width of #responsivecontainer , #navbar 100% instead , works properly.
some more info on vw units: https://css-tricks.com/viewport-sized-typography/
Comments
Post a Comment