Search code examples
htmlcsshorizontal-scaling

html & css unwanted horizontal overflow, if page becomes too wide vertically

I have a content box, which contains a standard lorem ipsum text. Like this the page looks just like it should: Template

But when I add more content into the content box so that it becomes too wide vertically, for some reason the page also becomes too wide horizontally: Template problem

Code(HTML):

<!-- Copyright © 2015 Enter|Elysium -->
<!-- Template made by Joonas Coatanéa -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is the 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 my videos" target="new">
<img id="youtube" align="right" src="images/YouTube-Icon.png" width="50" height="36" alt="Watch my videos"/>
</a>
<a class="nFx" href="http://www.twitch.tv/enterelysium" alt="Watch my streams" target="new">
<img id="twitch" align="right" src="images/Twitch-Icon.png" width="50" height="51" alt="Watch my 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, a 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, a 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, a 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, a 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, a 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, a 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, a 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, a 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, a 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, a 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, a 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, a 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, a 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, a 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 by 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 */
/* Do not change the code below, if you are not sure of what you are doing! */
*, body {
    margin: 0;
    padding: 0;
}
/* Do not change the code above, if you are not sure of what you are doing! */
/* Website Background Color Section */
body {
    background-color: #005399;
}
/* End Of Website Background Color Section */
/* Do not change the code below, if you are not sure of what you are doing! */
#responsiveContainer {
    width: 100vw;
}
/* Do not change the code above, if you are not sure of what you are 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 */
Solution

  • Do not use 100vw units for container width, as vw uses the size of viewport, without including the scrollbar. I changed the width of #responsiveContainer and #navbar to 100% instead and it now works properly.

    JSFiddle for you

    Some more info on vw units: https://css-tricks.com/viewport-sized-typography/