Content beyond the screen is not displayed? - html

Question

I am doing something wrong here but what is it I am not being able to figure out. Is something wrong with my code? Whenever I try to make the screen size smaller the content must be fixed up to a certain width but it's adjusting itself and nothing is displayed beyond it. And here is the jsFiddle with the image of what is wrong below.
HTML
<div class="sitefeed">
<!-- this is the start of site -->
<header>
<div class="wrap head-rel">
<ul class="nav">
<li>Home
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
<ul class="logo">
<h1>Naveen Niraula</h1>
</ul>
</div>
</header>
<div id="main">
<article>
<div class="wrap">
<h1>This</h1>
<p>My dear has kinda some typo somewhere.</p>
</div>
</article>
</div>
<!-- and here is the end -->
</div>
CSS
* {
margin: 0;
padding: 0;
font-family: consolas;
}
html {
height: 100%;
overflow: hidden;
}
body {
width: 100%;
height: 100%;
overflow: auto;
}
.sitefeed {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}
.wrap {
max-width: 901px;
min-width: 900px;
margin: auto;
padding: 0 5px;
}
/* ------------- header here ------------------- */
header ::-moz-selection {
color: #6cccf2;
}
header ::selection {
color: #6cccf2;
}
.head-rel {
position: relative;
}
header {
background: #3b5998;
color: #fff;
}
/* ----------- navigation goes right here ---------------- */
.nav {
list-style-type: none;
position: absolute;
bottom: 0;
right: 0;
}
.nav li {
display: inline-block;
}
.nav li a {
text-decoration: none;
color: #fff;
padding: 10px;
display: block;
}
.nav li:hover {
background: #000;
}
.nav li a:hover {
color: #fff;
}
/* ------------------------ main content goes here ------------------------ */
#main ::-moz-selection {
color: #a0249c;
}
#main ::selection {
color: #a0249c;
}
#main {
background: #e1e1e1;
}
I want it to display the whole content even when the viewport is small but if the viewport exceeds the webpage I want the background color to measure up to fill that space(left and right). Like the image below . But when I remove the width from .sitefeed it's not possible.
Solved.
It seems like table-layout:fixed; was causing the problem but now I fixed it!

Answer 1

Try taking the overflow:hidden out of your HTML style.

Answer 2

In this case when you work with the fixed width, just add this with to header and #main, which are both parents of .wrap with fixed width.
header, #main {width: 900px;}
http://jsfiddle.net/cj9pvz5o/

Answer 3

If I understand your question right, you don't want the following code:
.sitefeed { width: 100% }
If you remove this width, you get the background over the whole layout no matter if its outside of the viewport or not. Block elements (display: block) will always take as much width as they can, if not used in conjunction with float. I guess they same is true for display: table. This will take only 100% of the viewport and thus cut the background color at the point where the other content overflows.
Here is an updated jsFiddle: https://jsfiddle.net/nkwxw9gj/3/ Do you wanted to achieve this?
Note: the reason why it overflows from the viewport is your use of min-width: 900px within .wrap-rule. Change that in case you don't want to overflow for reasonable resolutions.