I have been searching for the solution that would solve my problem with having space beneath my footer in Chrome and IE, and then I found solution here Make div 100% height of browser window It was a revelation for me :) Now the footer stays nicely on the bottom of the page, but can you tell me why is it messing up my container? You can see this here http://jsfiddle.net/sx2d1t59/3/ and here is the full screen: http://jsfiddle.net/sx2d1t59/3/embedded/result/ The problem seems to be with html, body {height: 100%; } (at least it seems to me). I want my container (and content with it) normally centered in the middle and 1200px wide.
here is the HTML:
<body>
<div id="container">
<header>
<div id="logo">
<img src="images/someimage.jpg" alt="logo" />
</div>
<nav id="main-nav">
<ul>
<li><a href="index.html">BLA BLA</a>
</li>
<li><a href="about.html">BLA BLA</a>
</li>
<li><a href="books.html">BLA BLA</a>
</li>
<li><a href="ebooks.html">BLA BLA</a>
</li>
<li><a href="guestbook.html">BLA BLA</a>
</li>
<li><a href="contact.html">BLA BLA</a>
</li>
</ul>
</nav>
</header>
<div id="content">
<section id="left-column">
<h1>bla bla bla?</h1>
<p class="text-about">bla bla bla</p>
<p class="text-about">bla bla bla</p>
<p class="text-about">bla bla bla</p>
<p class="text-about">bla bla bla</p>
</section>
<section id="right-column">
<img src="images/some pic.jpg" alt="some pic">
</section>
</div>
<!--- end "content" --->
<footer>
<nav id="footer-nav">
<ul>
<li><a href="#">bla bla bla</a>
</li>
<li><a href="#">bla bla bla</a>
</li>
</ul>
<ul>
<li><a href="#">bla bla bla</a>
</li>
<li><a href="#">bla bla bla</a>
</li>
</ul>
<ul>
<li><a href="#">bla bla bla</a>
</li>
<li><a href="#">bla bla bla</a>
</li>
</ul>
</nav>
<div id="follow-fb"> <a href="#" target="_blank">Follow me on Facebook</a>
</div>
<div id="fb-icon"> <a href="#" target="_blank"><img src="images/fbicon_thumb.png" alt="Follow me on Facebook" /></a>
</div>
</footer>
</div>
<!--- end "container" --->
</body>`
and here is css:
html, body { height: 100%; }
body { display: flex; }
#container { width: 1198px;
flex: 1;
border-left: black solid 1px;
border-right: black solid 1px;
margin: auto;
}
/***************** HEADER ********************/
header { background:#000;
height: 100px;
}
#logo { width: 114px;
height: 64px;
float: left;
margin-top: 16px;
margin-left: 40px;
}
/***************** MAIN NAVIGATION ********************/
#main-nav { width:1000px;
height: 100px;
text-align:center;
float: right;
}
#main-nav ul { height: 100px;
line-height: 100px;
width: 1000px;
float:right;
display: inline-block:
}
#main-nav ul li { display:inline-block;
font-size: 20px;
text-decoration: none;
font-family: Courier New, Arial, sans-serif;
}
#main-nav a:link {color: #fff; text-decoration: none; padding: 15px;}
#main-nav a:visited {color: #fff; text-decoration: none; padding: 15px;}
#main-nav a:hover {color: #000; background-color: #d66c3c; font-weight: bold;}
#main-nav a:active {color: #000; background-color: #d66c3c; font-weight: bold;}
/***************** CONTENT ********************/
#content { min-height: 720px;
overflow: hidden;
}
#left-column { width: 600px;
float: left;
padding: 40px 20px 20px 20px;
min-height: 720px;
text-align:center;
}
#right-column { width: 500px;
float: right;
padding: 40px 20px 20px 20px;
min-height: 720px;
}
#right-column img { margin-left: 30px;
padding:10px;
border:3px solid #899298;
}
/***************** TITLES AND TEXT ********************/
h1 { font-size: 60px;
text-align: center;
font-family: Courier New, Arial, sans-serif;
}
h2 { font-family: Courier New, Arial, sans-serif;
font-size: 40px;
color: #d66c3c;
margin-top: 50px;
text-align: center;
}
h3 { font-family: Courier New, Arial, sans-serif;
font-size: 25px;
margin-top: 50px;
text-align: center;
}
.text-about { text-align: left;
margin-left: 70px;
margin-bottom: 10px;
font-size: 16px;
font-family: Courier New, Arial, sans-serif;
margin-bottom: 5px;
margin-top: 15px;
line-height: 20px;
text-indent: 20px;
}
.text-contact { font-family: Courier New, Arial, sans-serif;
font-size: 20px;
margin-top: 20px;
text-align: center;
}
/***************** FOOTER ********************/
footer { height:100px;
background:#000;
text-decoration: none;
padding-left: 15px;
clear: both;
}
#footer-nav { width: 600px;
float: left;}
#footer-nav ul { display: inline-block;
width: 120px;
font-family: Courier New, Arial, sans-serif;
margin-left: 30px;
margin-top: 15px;
}
#footer-nav li { font-size: 18px;
text-decoration: none;
line-height: 35px;
}
#footer-nav a:link {color: #fff; text-decoration: none;}
#footer-nav a:visited {color: #fff; text-decoration: none;}
#footer-nav a:hover {color: #d66c3c; }
#footer-nav a:active {color: #d66c3c; }
#follow-fb { float: left;
width: 250px;
font-size: 18px;
text-decoration: none;
height: 100px;
line-height: 100px;
font-family: Courier New, Arial, sans-serif;
margin-left: 200px;
}
#follow-fb a:link {color: #fff; text-decoration: none;}
#follow-fb a:visited {color: #fff; text-decoration: none;}
#follow-fb a:hover {color: #d66c3c; }
#follow-fb a:active {color: #d66c3c; }
#fb-icon { float: left;
width: 48px;
height: 48px;
margin-top: 25px;
}
