This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I have a demo here to illustrate my question.
http://www.ttmt.org.uk/forum/
It's a header, content and a footer.
The content is pushing the footer below the window but the footer still has a gap below.
Why is there a gap below the footer?
Do I need a sticky footer?
What's the best sticky footer for a responsive layout?
Thanks in advance for any help.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Title of the document</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/
v2.0b1 | 201101
NOTE: WORK IN PROGRESS
USE WITH CAUTION AND TEST WITH ABANDON */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define visible focus styles!
:focus {
outline: ?????;
} */
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* CLEAR FIX */
.clear {
clear: both;
}
.group:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
*html .group {
height:1%;
}
*:first-child+html .group {
min-height: 1px;
}
.clear {
clear:both;
}
/* END CLEAR FIX */
body{
font:1em Helvetica, sans-serif;
}
#page{
max-width:1000px;
margin:0 auto;
}
header{
background:blue;
height:100px;
}
.pageContent{
padding:50px 0;
background:#eee;
}
footer{
background:#b5b6b9;
width:1000px;
margin:0 auto;
}
footer ul{
float:left;
margin:0 20px 0 0;
}
footer ul li:first-of-type a{
text-transform:uppercase;
font-weight:bold;
}
footer a{
display:inline-block;
color:white;
font-size:.8em;
padding:1px;
}
</style>
</head>
<body>
<div id="page">
<header class="group">
<h2>Header</h2>
</header>
<section class="pageContent">
<h2>Content</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<footer class="group">
<h2>Footer</h2>
<ul>
<li>One</li>
</ul>
<ul>
<li>Two</li>
<li>2-1</li>
<li>2-2</li>
<li>2-3</li>
<li>2-4</li>
</ul>
<ul>
<li>Three</li>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
<li>3-5</li>
<li>3-6</li>
</ul>
</footer>
</body>
</html>
Remove this:
.group::after {
height: 0; }
The only sticky footer I have ever seen working 100% of the time, was this one: http://jsfiddle.net/DU3uf/
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<div id="wrapper">
<header>
</header>
<section>
</section>
<div id="push"></div>
</div>
<footer>
</footer>
</body>
</html>
CSS
html, body { width:100%; height:100%; }
#wrapper { width:100%; min-height:100%; height:auto; margin:0 auto -100px; }
#wrapper > header { width:100%; height:100px; background-color:#333; }
#wrapper > section { width:100%; height:400px; background-color:#FFF; }
#push { width:100%; height:100px; clear:both; }
footer { width:100%; height:100px; background-color:#1BA1E2; }
It's the same used by bootstrap http://getbootstrap.com/
.group::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Remove this height: 0;
Related
JSFiddle code here
I'm trying to make a CSS-only sticky menu (no JavaScript). When you scroll down, hover over menu items no longer works. I'm not sure why not.
CSS:
* {
margin: 0;
padding: 0;
}
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
body {
max-width: 960px;
margin: auto;
}
.cont2 h1 {
background: black;
color: lightskyblue;
padding: 10px;
}
.cont2 nav ul {
list-style-type: none;
background: lightskyblue;
padding: 20px;
}
.cont2 nav ul li {
display: inline-block;
}
.cont2 nav ul li a {
text-decoration: none;
padding: 20px;
color: black;
text-transform: uppercase;
}
.cont2 nav ul li a:hover {
background: black;
color: orange;
}
.sticky-nav {
position: sticky;
box-sizing: border-box;
top: 0;
}
I'm not posting the HTML here, because it's too much.
You need to set z-index:1; to class .sticky-nav
Here is the updated snippet:
* {
margin: 0;
padding: 0;
}
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
body {
max-width: 960px;
margin: auto;
}
.cont2 h1 {
background: black;
color: lightskyblue;
padding: 10px;
}
.cont2 nav ul {
list-style-type: none;
background: lightskyblue;
padding: 20px;
}
.cont2 nav ul li {
display: inline-block;
}
.cont2 nav ul li a {
text-decoration: none;
padding: 20px;
color: black;
text-transform: uppercase;
}
.cont2 nav ul li a:hover {
background: black;
color: orange;
}
.sticky-nav {
position: sticky;
box-sizing: border-box;
top: 0;
z-index: 1;
}
<div class="container cont2">
<h1> Main Heading </h1>
<nav class="sticky-nav">
<ul>
<li> Page One </li>
<li> Page Two </li>
<li> Contact </li>
</ul>
</nav>
<div class="row">
<div class="col">
<h2> LOREM IPSUM </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col">
<h2> LOREM IPSUM </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="row" id="contact">
<h2> CONTACT ME </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
My code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
html,body {margin: 0;padding: 0;box-sizing: border-box;}
html{
height: 100%;
}
body{
height: 100%;
}
.app {
height: 100%;
}
.page {
height: 100%;
background: linear-gradient(to bottom, #c2e59c , #64b3f4);
position: relative;
}
.chat {
height: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: scroll;
}
p{
padding: 155px 5px;
border: solid 1px red;
}
</style>
</head>
<body>
<div class="app">
<div class="page">
<div class="chat">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>
This is a simple full page chat box. It looks good. Just one problem, it can not scroll well on mobile, it stops scrolling when you untouch, it doesn't have continuity like it should.
Any idea why is that?
live demo for mobile test: http://demo.thatilike.com
note: you won't see the problem on chrome mobile mode, it needs to be tested on real mobile
Add -webkit-overflow-scrolling: touch; to the scrollable element. This will add momentum scrolling to the element on touch devices. But be sure to leave overflow-y: scroll for desktop.
I am having a problem setting up the css properly
Here is my small code that I play with:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { margin: 0; padding:0; }
html, body { width: 100%; height: 100%; background: #abc; }
#container { background: #eee; width: 100%; height:100%;}
#sidebar { background: #a0f; width: 200px; height: 500px; position: absolute; left: 0px; top: 0px; }
#content { background: #777; margin-left: 200px; width: auto; height: 100%; }
#wrapper { background: #357; height: auto; padding: 10px;}
#column1 { background: #0f0; width: 66%; float: left; }
#column2 { background: #f00; width: 33%; float: right; }
#text1 { background: white; width:80%; min-width: 300px; margin: 0 auto;}
#text2 { background: white; width:80%; min-width: 300px; margin: 0 auto;}
</style>
</head>
<body>
<div id="container">
<div id="sidebar">
</div><!-- end sidebar -->
<div id="content">
<div id="column1">
<div id="text1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div><!-- end column1 -->
<div id="column2">
<div id="text2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div><!-- end column2 -->
</div><!-- end content -->
</div><!-- end container -->
</body>
</html>
This is supposed to be a page with fixed sidebar on left and fluid content area on the right. In short pages I want the background color of #content extend to the bottom of screen (this works). On long pages I want that background to extend to the end of page (this does not).
I've added colors to all elements to see what's going where, but eventually the #content background will be white with 0.9 transparency, and there will be a background image on body.
How to fix that?
Update: see working example here: http://jsbin.com/AXUmALU/1/edit?html,output - just scroll the output up to see the break in colors.
I think I have what you want here. In the css I have added some selectors for a clearfix class, which is very common. It looks like this:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
And I added that class to the #content This css is from HTML5 Boilerplate, which you can google. I also changed
#content { height: 100%; } to #content { min-height: 100%; }
so that the content can expand beyond the size of the screen if it needs to.
I have a three-column, fixed header/footer and three-column content layout, where left and right DIVs don't stretch to 100% height when the middle DIV overflows..
Any suggestion? Also, what do you think as far layout CSS and it's cross-browser compatibility and overall CSS usage?
Cheers,
David
jsFiddle: http://jsfiddle.net/VsTYJ/1/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Page</title>
<style type="text/css">
html
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
height: 100%;
}
#container-main
{
background: #888888;
margin: 0;
padding: 0;
font: 1.5em "Trebuchet MS", Helvetica, sans-serif;
height: 100%;
min-height: 100%;
min-width: 768px;
}
#container-left, #container-middle, #container-right
{
float: left;
margin: 0;
padding: 0;
min-height: 100%;
}
#container-left
{
background: #777777;
width: 25%;
}
#container-middle
{
background: #999999;
width: 60%;
}
#container-right
{
background: #777777;
width: 15%;
}
#container-header
{
background: #eee;
border: 0px solid #666;
height: 60px;
left: 0;
position: fixed;
width: 100%;
top: 0;
padding: 0;
}
#header-left, #header-middle, #header-right
{
text-align: center;
line-height: 60px;
margin: 0;
padding: 0;
float: left;
}
#header-left
{
background: #999999;
width: 25%;
}
#header-middle
{
background: #888888;
width: 60%;
}
#header-right
{
background: #999999;
width: 15%;
}
#container-content
{
margin: 0;
overflow: auto;
padding: 50px 0 50px 0;
width: 100%;
}
#content
{
}
#container-footer
{
background:#eee;
border: 0px solid #666;
bottom:0;
height:60px;
left:0;
position:fixed;
width:100%;
}
#footer-left, #footer-middle, #footer-right
{
text-align: center;
line-height: 60px;
margin: 0;
float: left;
}
#footer-left
{
background: #999999;
width: 25%;
}
#footer-middle
{
background: #888888;
width: 60%;
}
#footer-right
{
background: #999999;
width: 15%;
}
</style>
</head>
<body>
<div id="container-main">
<div id="container-left">
Content 1
</div>
<div id="container-middle">
<div id="container-header">
<div id="header-left">
Header Left
</div>
<div id="header-middle">
Header Middle
</div>
<div id="header-right">
Header Right
</div>
</div>
<div id="container-content">
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div id="container-footer">
<div id="footer-left">
Footer Left
</div>
<div id="footer-middle">
Footer Middle
</div>
<div id="footer-right">
Footer Right
</div>
</div>
</div>
<div id="container-right">
Content 3
</div>
</div>
</body>
</html>
Try this
Fiddle Here:- http://jsfiddle.net/z837M/
Change i did was not to wrap the content with the background and you can use background-size is you are planning to place any image later and you can use 100% or cover as its value. Make the position Fixed and Z-Index :-1
CSS
#container-main
{
background: #888888;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
margin: 0;
padding: 0;
font: 1.5em "Trebuchet MS", Helvetica, sans-serif;
height: auto;
min-height: 100%;
min-width: 100%;
position:fixed;
z-index:-1;
}
Html
<div id="container-left">
Content 1
</div>
<div id="container-middle">
<div id="container-header">
<div id="header-left">
Header Left
</div>
<div id="header-middle">
Header Middle
</div>
<div id="header-right">
Header Right
</div>
</div>
<div id="container-content">
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div id="container-footer">
<div id="footer-left">
Footer Left
</div>
<div id="footer-middle">
Footer Middle
</div>
<div id="footer-right">
Footer Right
</div>
</div>
</div>
<div id="container-right">
Content 3
</div>
UPDATE
Use table display to have the columns take full height. Since you have some fixed elements it doesn't matter where they reside. Fiddle
CSS
div.column {
display:table-cell;
}
div.section {
display:table-row;
}
HTML
<div id="container-wrapper" class="section">
<div id="container-left" class="column">
<div class="container-content">Content 1</div>
</div>
<div id="container-middle" class="column">
<div class="container-content">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div id="container-right" class="column">Content 3</div>
</div>
I’m looking for a way to create a newspaper layout for a website where the content is split into two columns but with a quotation box in the middle of the columns.
I know how to make two columns using CSS3 with the
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
But how do I create the quotation box in the middle and is there any way that I “wrap” the content inside the columns around the box in the middle?
I’ve attached an illustration of what I mean.
Please imagine in this illustration that the text in the two columns is wrapped around the box in the middle.
Here's a solution that works:
DEMO HERE
This would give your columns flexibility. However, your quote area would have to be a fixed height/width. If you want to adjust the quote area, change the widths/heights of the spacer divs at the beginning of each column div. Not an elegant solution, but it works.
CSS:
#one {
float:left;
width:48%;
background-color:#f0f0f0;
min-height:400px;
}
#two {
float:right;
width:48%;
background-color:#f0f0f0;
min-height:400px;
}
#three {
position: absolute;
left:50%;
top:100px;
margin-left:-300px;
border:1px solid;
width:600px;
height:200px;
background: maroon;
color: white;
}
HTML:
<div id="one">
<div style="float: right; height: 80px; width: 10px;"></div>
<div style="float: right; height: 210px; width: 300px; clear: both;"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="three">Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. </div>
<div id="two">
<div style="float: left; height: 80px; width: 10px;"></div>
<div style="float: left; height: 210px; width: 300px; clear: both;"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Notice: This builds upon peteris solution (which didn't wrap around the quote div) below.
I guess it's wrong but...:
<style>
#one {
float:left;
width:48%;
background-color:#f0f0f0;
min-height:400px;
}
#two {
float:right;
width:48%;
background-color:#f0f0f0;
min-height:400px;
}
#three {
position:absolute;
left:50%;
top:50%;
margin-top:-150px;
margin-left:-100px;
border:1px solid;
width:200px;
height:200px;
}
</style>
<div id="one">ONE</div>
<div id="three">3</div>
<div id="two">two</div>
It can be achieved, but... it's not flexible, you'll have to tweak the positioning for almost any change you make to the text.
DEMO
HTML
<div class='newspaper'>
<img src='http://img259.imageshack.us/img259/8049/birmancat.jpg'>
<p><!-- paragraph text --></p>
<!-- nine more paragraphs -->
</div>
CSS I've added:
.newspaper {
position: relative;
width: 580px;
padding: 10px;
margin: 0 auto;
box-shadow: 1px 1px 5px;
column-count: 2;
column-gap: 20px;
font-size: 12px
}
p { margin: 0 0 10px; }
p:nth-child(3):before, p:nth-child(8):before {
width: 145px;
height: 200px;
content: '';
}
p:nth-child(3):before {
float: right;
}
p:nth-child(8):before {
float: left;
}
.newspaper img {
position: absolute;
z-index: 2;
top: 85px; left: 50%;
margin: 0 -150px;
}
http://jsfiddle.net/iansan5653/xbfYD/4/
I modified #sean_mcgee's answer by adding some JavaScript to split the columns for you. Just place the text in the newspaperArticle div, and put your quote in the JavaScript field. It doesn't work well on a small screen because the words are longer than the space, so here is a full-screen example: http://jsfiddle.net/iansan5653/xbfYD/4/embedded/result/. The only problem is that it could split an HTML tag apart, so be careful.