With combining two examples I've found:
http://alistapart.com/article/holygrail
http://mystrd.at/modern-clean-css-sticky-footer/
I have come up with this layout.
http://jsfiddle.net/xVuh5/
And it is great but I would like to have the 3 columns 100% height.
Can anyone help please?
Thank you
Body of the html and css script as asked by the SO editor validation for including jsfiddle in the text:
<div id="header">This is the header.</div>
<div id="container">
<div id="center" class="column">
<h1>This is the main content.</h1>
<p>Text Text</p>
</div>
</div>
<div id="footer">This is the footer.</div>
/*** The Essential Code ***/
* /* For CSS Reset */
{
padding: 0;
margin: 0;
}
html {
position: relative;
min-height: 100%;
}
body {
min-width: 630px; /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
margin: 0 0 100px; /* bottom = footer height */
}
html, body {
height: 100%;
width: 100%;
}
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px; /* CC padding */
width: 100%;
}
#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
right: 240px; /* LC fullwidth + CC padding */
margin-left: -100%;
}
#right {
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -100%;
}
#footer {
clear: both;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
/*** IE Fix ***/
* html #left {
left: 150px; /* RC fullwidth */
}
/*** Just for Looks ***/
body {
margin: 0;
padding: 0;
background: #FFF;
}
#header, #footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background: #999;
}
#left {
background: #66F;
}
#center {
background: #DDD;
}
#right {
background: #F66;
}
#container .column {
padding-top: 1em;
text-align: justify;
}
As I see the first answers coming in are missing the point of my question, I am adding this image to make the question clearer.
Actually, I would do it differently.
Pure CSS solution, Totally responsive, Without fixing any height (header or footer)
Here's the Demo
The only downsize, is that you have to build your HTML in a certain order. (Footer comes before the columns)
<div class="Container">
<div class="Header">
<h1>Header</h1>
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper Content">
<div class="Table">
<div class="Column C1">
</div>
<div class="Column C2">
</div>
<div class="Column C3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The column width may be fixed, or not.. to you're will.
Probable solution: DEMO
I have used wrapper class to adjust height.
.wrapper{
height: auto !important;
min-height: calc(100% - 60px);/* 100% - 30px header - 30px footer*/
}
adjust width of columns.
You could use css tables to do this.
FIDDLE (Little content)
FIDDLE (Lots of content)
(Assuming header height of 30px and footer height of 100px)
Relevant CSS
#container
{
display:table;
width: 100%;
height: 100%;
margin: -30px 0 -100px;
padding: 30px 0 100px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#container .column {
display: table-cell;
}
The above problem can be solved by applying negative margin and positive padding method.
The js fiddle can be found at http://jsfiddle.net/6RQES/1/
HTML code :
<div id="header">This is the header.</div>
<div id="container">
<div id="center" class="column">
<h1>This is the main content.</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<div id="left" class="column">
<h2>This is the left sidebar.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<div id="right" class="column">
<h2>This is the right sidebar.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
</div>
<div id="footer">This is the footer.</div>
The corresponding styles are:
/*** The Essential Code ***/
* /* For CSS Reset */
{
padding: 0;
margin: 0;
}
html {
position: relative;
min-height: 100%;
}
body {
min-width: 630px; /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
margin: 0 0 100px; /* bottom = footer height */
}
html, body {
height: 100%;
width: 100%;
}
#maincontainer{
position:relative;
min-height:100%;
padding-bottom: 32px;
}
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
overflow: hidden;
}
#container .column {
position: relative;
float: left;
padding-bottom: 8000px;
margin-bottom: -8000px;
}
#center {
padding: 10px 20px; /* CC padding */
width: 100%;
}
#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
right: 240px; /* LC fullwidth + CC padding */
margin-left: -100%;
}
#right {
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -100%;
}
#footer {
clear: both;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
/*** IE Fix ***/
* html #left {
left: 150px; /* RC fullwidth */
}
/*** Just for Looks ***/
body {
margin: 0;
padding: 0;
background: #FFF;
}
#header, #footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background: #999;
}
#left {
background: #66F;
}
#center {
background: #DDD;
}
#right {
background: #F66;
}
#container .column {
padding-top: 1em;
text-align: justify;
}
See DEMO
I have change some css changes. Have a look hope it will help you
updated CSS
<style>
/*** The Essential Code ***/
* /* For CSS Reset */
{
padding: 0;
margin: 0;
}
html {
position: relative;
min-height: 100%;
}
body {
min-width: 630px; /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
margin: 0 0 100px; /* bottom = footer height */
}
html, body {
height: 100%;
width: 100%;
}
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
display:table;
height:100%;
}
#container .column {
position: relative;
float: left;
display:table;
height:100%;
}
#center {
padding: 0 20px; /* CC padding */
width: 100%;
}
#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
right: 240px; /* LC fullwidth + CC padding */
margin-left: -100%;
}
#right {
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -100%;
}
#footer {
clear: both;
/*position: absolute;*/
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
/*** IE Fix ***/
* html #left {
left: 150px; /* RC fullwidth */
}
/*** Just for Looks ***/
body {
margin: 0;
padding: 0;
background: #FFF;
}
#header, #footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background: #999;
}
#left {
background: #66F;
}
#center {
background: #DDD;
}
#right {
background: #F66;
}
#container .column {
/*padding-top: 1em;*/
text-align: justify;
}
</style>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" bgcolor="#000066" colspan="3">fdsafdsa</td>
</tr>
<tr>
<td bgcolor="#666666" height="1000px" width="15%">fdsafdsasd</td>
<td bgcolor="#00CC00" height="1000px" width="70%">fdsafdsasd</td>
<td bgcolor="#990033" height="1000px" width="15%">fdsafdsasd</td>
</tr>
<tr><td colspan="3" bgcolor="#CCCC00">fdsafdsafds</td></tr>
</table>
your enhanced code: http://jsfiddle.net/xVuh5/6/
I have changed many thing:
html {
position: relative;
min-height: 100%;
}
body {
min-width: 630px;
margin: 0 0 100px;
}
html, body {
height: 100%;
width: 100%;
}
#container .column {
position: absolute;
float: left;
}
#center.column{
position:relative;
min-width:100px;
}
#center {
padding: 10px 20px;
width: 100%;
margin-right:150px;
margin-left:150px;
}
#left {
width: 130px;
padding: 0 10px;
left: 0px;
}
#right {
width: 130px;
padding: 0 10px;
right:0px;
}
#footer {
clear: both;
margin-bottom: 0px;
height: 100px;
width: 100%;
}
/*** IE Fix ***/
* html #left {
left: 0px;
}
/*** Just for Looks ***/
body {
margin: 0;
padding: 0;
background: #FFF;
}
#header, #footer {
display:block;
font-size: large;
text-align: center;
padding: 0.3em 0;
background: #999;
z-index:101;
}
#left {
background: #66F;
}
#center {
background: #DDD;
}
#right {
background: #F66;
}
#container .column {
padding-top: 1em;
text-align: justify;
}
UPDATE: avrahamcool solution is much much better, useing a clean code is always a better solution
Easiest solution: apply height:100%; to both #container .column and also to #container. I just gave it a shot in your JSFiddle and it seemed to work fine. Main point being, that the div containing the columns also needs 100% height applied.
So this would be your new CSS:
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
height:100%;
}
#container .column {
position: relative;
float: left;
height:100%;
}
As mentioned it would work with "display: table;": JSFiddle
However float:left won't allow div-s to be the same height.
#container {
display: table;
}
#container .column {
position: relative;
float: top;
}
#center {
...
display: table-cell;
}
#left {
...
display: table-cell;
}
#right {
...
display: table-cell;
}
And the order of div-s:
<div id="left" class="column">
</div>
<div id="center" class="column">
</div>
<div id="right" class="column">
</div>
Oh and I almost forgot to make header and footer to float:
#footer {
...
position: fixed;
}
You could achieve your goal by using Jquery :
var height = $(window).height(); // returns height of browser viewport or use next line
var height = $(document).height(); // returns height of HTML document , just use what u need, not both.
then :
$('.cols').height(height);
So, I think this would be the best
You can achieve this by using the following function.. And call it on
body onload
<body onload="height()"></body>
Now add the following function and add JQuery Library in your html.
function height()
{
var ele = document.getElementById('container');
$(ele).css("height", window.innerHeight - 100);
var height = $(ele).css("height");
$("#left").css("height",20+height);
$("#center").css("height",height);$("#right").css("height",20+height);
}
At the place of height you need to set min-height and the other method just keep
height:900px;
like this (static height)for full height and keep it's css with
overflow:scroll; or overflow:auto;
Just to be simple.
HTML:
<div class='section'>
data
</div>
<div class='section'>
data
</div>
<div class='section'>
data
</div>
CSS:
html, body { height: 100%; } /** Will not work without it because until and unless the height of the parent divs are not 00% the children could not have the height 100% aswell. **/
.section {
width: calc(100%/3); /** To make the width of all the divs same **/
height: 100%; /** Obivo, making their height to 100% **/
display: inline-block;
}
.footer {
position: absolute; /** To enable **bottom** property to work :P **/
bottom: 0; /** To stick it to the bottom **/
}
Hope it helps.
I edited your fiddle and just added a height field to the left, right, and center fields of the css portion. The number can be arbitrarily large and it should work for all display sizes. Definitely simpler than all the other solutions.
Edit: The background of the right, middle, and left will only go as far as the text itself without specifying the height. 100% height changes nothing, it only works to override a parent element with a different specified height (such as if a pixel height had been defined for all paragraph tags, but you want the background of one to cover all of the text and only the text, you would use ). To change the height to be the whole page, either the arbitrarily large height or another solution would be needed, but this is the reason it isn't working. 100% height makes it as if height had not been mentioned before. (this is based on my small amount of experience with one browser, not all solutions will work for all broswers)
Just do that :
.col{
display:block;
height:100%;
}
It's Simple, it's fast, it's css.
Related
I am building a website and I'm on a time crunch, struggling to get the layout below to align vertically on smaller screen devices using media queries.
Desired vertical layout in this order for smaller screens:
intro
image 1
sidedoc
image 3
conclude
image 4
image 2 not to be displayed on smaller screens
.container {
border-width: thick;
border-style: groove;
border-radius:5px;
width:100%;
}
.intro {width: 910px; text-align: justify; padding: 10px; margin-bottom: 10px;}
.sidedoc { width: 390px; text-align: justify; float: right; margin-right: 10px; margin-top: -450px;}
.conclude {width: 920px; padding: 10px; text-align: justify; margin-top: 20px; }
.readysetgo {
float: right;
border-radius: 7px;
margin-right: 28px;
margin-top: -148px;
-webkit-animation: mymove 10s infinite; /* Chrome, Safari, Opera */
animation: mymove 10s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
50% {box-shadow: 10px 20px 30px green;}
}
/* Standard syntax */
#keyframes mymove {
50% {box-shadow: 10px 20px 30px green;}
}
.reclaim {max-width: 100%;margin-left: 120px;}
.rounded {max-width: 50%; border-radius: 10px; float: right; margin-right: 17px; margin-top: -375px;}
.thinkgreen {max-width: 100%; margin-left: auto; margin-right: auto; display: block; margin-bottom: 25px; margin-top: 20px;}
<div class="container">
<div class="intro">
content 1
</div>
<img src="Images/Capturegreen.JPG" width="375" height="191" alt="" class="readysetgo"/>
<img src="Images/TotalReclaimICON_NoShadow.jpg" alt="" class="reclaim"/>
<div class="sidedoc">
content 2
</div>
<div class="conclude">
content 3
</div>
<img src="Images/ttr.jpg" width="375" height="370" alt="" class="rounded"/>
<img src="Images/thinkgreen.jpg" width="268" height="273" alt="" class="thinkgreen"/>
</div>
Here this is a basic layout for you https://jsfiddle.net/snpsp6as/5/
HTML
<div class="intro">
intro
</div>
<img class="image1" src="http://lorempixel.com/400/200/">
<img class="image2" src="http://lorempixel.com/400/200/">
<div class="sidedoc">
Side Doc
</div>
<img class="image3" src="http://lorempixel.com/400/200/">
<div class="conclude">
conclude
</div>
<img class="image4" src="http://lorempixel.com/400/200/">
CSS
body {
margin: 0;
}
div,
img {
width: calc(50% - 6px);
height: 200px;
border-style: solid;
float: left;
}
.image3 {
float: right
}
.image4 {
margin: auto;
display: block;
float: none;
}
img {
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
//width: 400px;
//height: 100px;
}
#media(max-width: 800px) {
div,
img {
width: 100%;
}
.image2 {
display: none;
}
}
EXPAND THE WINDOW see image below
There are several ways you can achieve this, one way is with #media in your css.
Here is an example using #media
HTML
<div id="pagewrap">
<header>
<h1>3 Column Responsive Layout</h1>
</header>
<section id="content">
<h2>1st Content Area</h2>
<p>This page demonstrates a 3 column responsive layout, complete with responsive images and jquery slideshow.</p>
</section>
<section id="middle">
<h2>2nd Content Area</h2>
<p>At full width all three columns will be displayed side by side. As the page is resized the third column will collapse under the first and second. At the smallest screen size all three columns will be stacked on top of one another.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</section>
<aside id="sidebar">
<h2>3rd Content Area</h2>
<p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</aside>
<footer>
<h4>Footer</h4>
<p>Footer text</p>
</footer>
</div>
CSS
/* STRUCTURE */
#pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
}
header {
height: 100px;
padding: 0 15px;
}
#content {
width: 290px;
float: left;
padding: 5px 15px;
}
#middle {
width: 294px; /* Account for margins + border values */
float: left;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
}
#sidebar {
width: 270px;
padding: 5px 15px;
float: left;
}
footer {
clear: both;
padding: 0 15px;
}
/***********************MEDIA QUERIES***********/
/* for 980px or less */
#media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 41%;
padding: 1% 4%;
}
#middle {
width: 41%;
padding: 1% 4%;
margin: 0px 0px 5px 5px;
float: right;
}
#sidebar {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}
header, footer {
padding: 1% 4%;
}
}
/* for 700px or less */
#media screen and (max-width: 600px) {
#content {
width: auto;
float: none;
}
#middle {
width: auto;
float: none;
margin-left: 0px;
}
#sidebar {
width: auto;
float: none;
}
}
/* for 480px or less */
#media screen and (max-width: 480px) {
header {
height: auto;
}
h1 {
font-size: 2em;
}
#sidebar {
display: none;
}
}
#content {
background: #f8f8f8;
}
#sidebar {
background: #f0efef;
}
header, #content, #middle, #sidebar {
margin-bottom: 5px;
}
#pagewrap, header, #content, #middle, #sidebar, footer {
border: solid 1px #ccc;
}
Again credit to this page
I want my page to fill the screen even if it doesn't contain enough content. I have made this happen with height set to 100% in body. What I also want is some space around my content, and by adding 5px to the margin it gets how I want it. My problem is that then I have to scroll to see the whole page, even if the content is not too long for the screen. I guess there is a simple sollution to this, but I can't seem to find it. Anyone who can?
/* Allmänt */
html, body{
background: grey;
background-size: cover;
height: 100%;
}
#content{
background-color: white;
width: 1100px;
margin: 5px auto;
border-radius: 5px;
position: relative;
height: auto !important;
min-height: 100%;
}
/* Header */
#huvud{
width: 1000px;
height: 250px;
margin: 0 auto;
position: relative;
padding-top: 5px;
}
#header{
display: block;
}
/* Meny */
#nav-yttre{
width: 1000px;
height: 35px;
margin: 0 auto;
background-image: url("Rusty-bar2.jpg");
}
#nav-mitten{
display: table;
width: 100%;
padding: 10px;
}
#nav-inre{
display: table-row;
list-style: none;
font-family: 'Special Elite', Verdana, Arial, sans-serif;
font-size: 25px;
}
#nav-inre li{
display: table-cell;
}
#nav-inre li a{
display: block;
text-decoration: none;
text-align: center;
color: #eeeeee;
}
#nav-inre li #here{
color: #221f20;
}
#nav-inre li a:hover{
color: #221f20;
}
/* Main */
#main{
width: 980px;
margin: 0 auto;
height: 100%;
position: relative;
padding-bottom: 150px;
}
#fadein {
margin: 10px auto;
position:relative;
width:970px;
height:215px;
padding: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#fadein img {
position:absolute;
}
#main-blogg{
width: 1050px;
margin: 0 auto;
}
#blogg{
min-height: 1000px;
}
/* Fot */
#fot{
width: 980px;
margin: 0 auto;
text-align: center;
}
#fot-inre{
border-top: solid #221f20 1px;
position: absolute;
bottom: 0;
}
#adress{
width: 327px;
float: left;
}
#kontakt{
width: 326px;
float: left;
}
#tider{
width: 326px;
float: right;
}
#design{
width: 500px;
margin: 0 auto;
clear: both;
text-align: center;
background-image: url("Rusty-bar-small.jpg");
}
#design p{
color: #eeeeee;
font-weight: bold;
}
#design a{
color: #eeeeee;
}
#design a:hover{
color: #221f20;
}
#rub{
font-weight: bold;
}
/* Allmänt */
p{
font-family: Verdana, Arial, sans-serif;
color: #221f20;
font-size: 0.9em;
}
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stajlish.css">
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="stajlish.js"></script>
</head>
<body>
<div id="content">
<div id="huvud">
<img id="header" src="hej.jpg" alt="Header">
</div>
<div id="nav-yttre">
<div id="nav-mitten">
<ul id="nav-inre">
<li>HEM</li>
<li>OM OSS</li>
<li>BLOGG</li>
<li>MÄRKEN</li>
<li>HITTA HIT</li>
</ul>
</div>
</div>
<div id="main">
<div id="fadein">
<img src="slides1.jpg">
<img src="slides2.jpg">
<img src="slides3.jpg">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempus quam lectus, in suscipit nisl luctus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit eros, tempor sed bibendum nec, luctus in dui. Proin vitae tincidunt diam, a pulvinar tortor. Maecenas pulvinar rhoncus nisl quis aliquet. Nulla dolor metus, euismod ac gravida eget, congue at nunc. Etiam non urna vel dolor pulvinar finibus. Suspendisse eget lacinia massa. Morbi sodales non purus pretium congue. Nullam sed tellus diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla porta sapien sit amet placerat lobortis. Nunc sed orci tincidunt, lacinia massa ut, fringilla est. Maecenas sodales orci at erat malesuada, non tristique leo auctor. Suspendisse augue felis, lobortis rhoncus pharetra at, pretium sit amet dolor.</p>
</div>
<div id="fot">
<div id="fot-inre">
<div id="adress">
<p id="rub">BESÖKSADRESS</p>
<p>Hej</p>
</div>
<div id="kontakt">
<p id="rub">KONTAKTA OSS</p>
<p>Telefon: 08-123 45 67</p>
<p>Mail: info#mail.se</p>
</div>
<div id="tider">
<p id="rub">ÖPPETTIDER</p>
<p>Vardagar: 10-19<br>Lördag: 10-17<br>Söndag: 11-16</p>
</div>
<div id="design">
<p>Webbplatsen är gjord av Maria</p>
</div>
</div>
</div>
</div>
</body>
Bulletproof full height!
*,
*:before,
*:after {
-webkit-box-sizing:border-box;
-mozbox-sizing:border-box;
box-sizing:border-box;
}
html,
body {
height:100%;
height:100vh;
margin:0;
padding:0;
}
#content {
height:auto !important;
min-height:100%;
min-height:100vh;
}
Reasons:
100vh is supported in IE9 and above (and basically anything else), and 100% is used as a fallback
border-box is a key piece of layout functionality, to support recalc after padding (so width:50px actually remains 50px, instead of 50px plus padding), and it works back to IE8
adding the margin:0;padding:0; to the html,body eliminates the white space around it ... if you desperately want padding on the body, add it separately (although you should really have it on whatever container you have for everything)
EDIT
So the reason you are still needing to scroll is because border-box handles padding, but not margin. If you want "room" around your content, add the padding there:
#content {
height:auto !important;
min-height:100%;
min-height:100vh;
padding:5px 0;
}
This will give you the effect of room on top and bottom. However, if (for some crazy reason) you are really clinging to the need for margin over padding, you could use calc:
#content {
height:auto !important;
min-height:calc(100% - 10px);
min-height:calc(100vh - 10px);
margin:5px auto;
}
Only supported on IE9 and up, but will give you what you are looking for. I highly advise against it though, as what you are trying to attain is much more easily doable in ways that don't involve margin.
I would implement 2 things. I would use a bumper and calc.
<div class="bumper"></div>
.bumper {
height:5px;
width:100%;
}
put the bumper where you would want your padding to be. Then use calc to set the height of the content.
#content {
background-color: white;
max-width:800px;
padding: 5px;
min-height:90%; //backup for browsers who do not support calc
min-height:calc(100% -5px);
margin-left: auto;
margin-right: auto;
border-radius: 5px;
}
html, body {
background: grey;
height: 100%;
margin:0px; //important
}
Result:
http://jsfiddle.net/m/qes/
Full Code: http://jsfiddle.net/neoaptt/r2ddyg8e/
Change
html, body{
background: grey;
background-size: cover;
height: 100%;
}
to
html, body{
background: grey;
background-size: cover;
height: 100vh;
}
then add a reset
*{box-sizing: border-box; padding: 0; margin: 0}
you can read more about Sizing with CSS3's vw and vh units
The problem:
The reason you have to scroll to see the whole page is because you are giving your element with the id content a min-height of 100% and then also giving it a margin of 5px auto. This is essentially saying I want my content element to have a height of 100% + 5px on the top and 5px on the bottom of margin. height now equals: (100% + 10px).
The answer:
If you want space around your content use the padding property on your content element instead of the margin. This will push the elements within the content element inward 5px from the top and 5px from the bottom, without increasing the height of your content element past 100%.
It should look something like this (not tested):
#content{
background-color: white;
width: 1100px;
padding: 5px auto; /* changed margin to padding */
border-radius: 5px;
position: relative;
height: auto !important;
min-height: 100%;
}
You have a top and bottom margin on your #content div. Remove it and add this to the body :
body {
padding: 5px 0;
box-sizing: border-box;
}
I am trying to extend the background color of my nav-wrapper div or in general, my navigation area, beyond the 960px container. I have tried some techniques, but nothing has appeared to be working. See attached code and JSFiddle.
JSFidde: Header Background Color Extend
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Responsive 3-Line Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link type="text/javascript" src="navicon.js">
</head>
<body>
<!-- Start Wrapper -->
<div class="wrapper">
<!-- Start Navigation Wrapper -->
<nav class="nav-wrapper">
<img src="tappery.png"/>
<!-- Start Navigation Links -->
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- End Navigation Links -->
</nav>
<!-- End Navigation Wrapper -->
<!-- Start Content -->
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet ante orci, vitae auctor risus pharetra at. Quisque gravida a massa eget hendrerit. Nulla facilisi. Ut rutrum commodo faucibus. Aenean nec libero condimentum, vehicula nisi ut, ullamcorper felis. Ut non tempus odio. Donec vulputate blandit adipiscing. Ut condimentum feugiat lacus. Morbi eget mi pulvinar, imperdiet quam non, commodo ante. Proin vel urna in quam malesuada tincidunt. Suspendisse bibendum lacinia mi, et consectetur felis. Quisque a sem vel justo condimentum scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec molestie dapibus quam, nec pharetra nisl pretium in. Fusce blandit felis vitae eros tempor, in tempor neque malesuada. Duis in dignissim sem.</p>
</div>
<!-- End Content -->
</div>
<!-- End Wrapper -->
<script type="text/javascript">$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function(){
$("#nav").slideToggle();
});
$(window).resize(function(){
if(window.innerWidth > 768) {
$("#nav").removeAttr("style");
}
});</script>
</body>
</html>
CSS:
html, body {
overflow-x: hidden;
}
body {
margin: 0;
padding: 0;
background-color: #cecece;
}
.wrapper {
top:0;
margin-top: 0;
width: 960px;
margin-right: auto;
margin-left: auto;
background-color: #fff;
overflow: hidden;
}
#logo {
width: 200px;
}
#logo img {
width: 150px;
height: 40px;
}
#nav {
width: 100%;
}
#content {
margin-top: 50px;
}
li {
}
li:last-child {
border-right:none;
}
li a {
display: block;
width:100%;
background:#fff;
color: #3d6430;
font-size:1.35em;
text-decoration: none;
margin-top: 5px;
}
#media screen and (max-width: 768px) {
.wrapper {
width: 100%;
overflow: hidden;
}
#nav {
clear: both;
}
#menu {
width:1.4em;
display: block;
background:#fff;
font-size:1.35em;
text-align: center;
float: right;
top:0;
}
#logo {
float: none;
}
#nav.js {
display: none;
padding: 0;
}
ul {
width:100%;
list-style:none;
height: auto;
}
li {
width:100%;
border-right:none;
border-top: 1px solid #3d6430;
}
}
#media screen and (min-width: 768px) {
.nav-wrapper {
background-color: #fff repeat-x;
width: 100%;
overflow: hidden;
position: fixed;
z-index: 100;
}
#nav {
clear: both;
}
#logo {
float: left;
display: inline;
}
ul {
width:100%;
background-color: #fff;
height: 40px;
padding: 0;
display: inline;
}
li {
padding: 0 20px;
float: left;
list-style-type: none;
}
#menu {
display: none;
}
}
Okay, here is my answer. It's a little bit hackish but it should work...so, you can't confine it within the bounds of the wrapper, because it's limited to 960px. You'll need to declare something before the wrapper.
What I would do is make a small, white image that is 1px wide and however tall your nav is. Then, set the background color AND image in the body:
body{
background-image: url('white.jpg');
background-color: #cecece;
background-position: left top;
background-repeat: repeat-x;
}
There are downsides; you'd have to know the exact height of your nav, and if that changes you'd need to change the image's size as well. Let me know if that works--thank you for providing the image, it cleared up what you wanted.
Just set left:0; to the .nav-wrapper and remove repeat-x from background color:
.nav-wrapper {
background-color: #fff;
width: 100%;
overflow: hidden;
position: fixed;
left:0;
z-index: 100;
}
Here is a FIDDLE
If anyone came here in hopes to extend background colors outside of Bootstrap container, this is how I solved it.
Bootstrap's container will give you a centered column of content on the page. But what if you want to give color to JUST ONE of the margin areas outside of Bootstrap's container?
I solved it by wrapping the container, with a flexbox-container and building 3 distinct columns: left margin column, content column, and the right margin column.
To ensure that it's always centered, I used this bit to determine the width of each margin column:
.right-box, .left-box{
width: calc((100vw - 1170px) /2);
}
Here's a code pen.
Cant you just add a div before the wrapper?
Somthing like this:
|HTML|
<body>
<div class="backgroundColorContainer">
<div class="wrapper">
// code here
</div>
</div>
</body>
|CSS|
.backgroundColorContainer
{
background-color: #222222;
}
Worked for me :D
I'm using CSS to try to align 2 pictures side by side with some text underneath each picture. I'm trying to make it so that the text under the picture justifies to the width of the picture, no matter what the size of the picture. But what I get as a result is the two blocks of text overlapping. For example, I want it to look like:
**************** ***************
* Image * * Image *
* * * *
**************** ***************
Lorem ipsum dolor Lorem ipsum dolor
sit amet, sit amet,
consectetuer consectetuer
adipiscing adipiscing
elit, sed diam elit, sed diam
But I can't get the text under the image to justify, instead, they overlap. I also want it to come right before the footer (last element on the page before the footer), but the footer is overlapping some of the text as well. Here is my code:
HTML:
<div class="container">
<div class="img">
<img src="flower1small.jpg" alt="flower">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="image">
<img src="flower1small.jpg" alt="flower">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
And the CSS:
.container{
margin-top: 15%;
margin-left: 10%;
}
.img {
width:800px;
margin-left:auto;
margin-right:auto;
position: absolute;
}
.image {
width:800px;
margin-left:auto;
margin-right:auto;
position: relative;
}
div.img p{
text-align: justify;
display: block;
width:800px;
}
.bottom{
padding: 15px;
}
footer{
background: #660000;
position:absolute;
bottom:0;
width: 85%;
height:100px;
margin-right: 10%;
margin-left: 10%;
}
footer a{
color: #ffffff;
text-decoration: none;
font-size: 10px;
}
footer label{
color: #ffffff;
font-size: 10px;
}
What can I do to make it align properly? Any help would be greatly appreciated. Thanks in advance.
Do you mean like this: Example Fiddle ?
You would have to set a max-width for the .img elements. I used an example of a max-width of 250px and images with a width of 200px. Also you need to float them and apply a clearfix, so that the footer is positioned correctly. The footer needs to get rid of position: absolute.
That the whole .img element just uses the width of the picture for the text is not possible without javascript, so you would have to set the width via CSS.
.container{
margin-top: 15%;
margin-left: 10%;
display: block;
}
.img {
max-width:250px;
float: left;
margin: 0 5%;
}
.img img {
margin: 0 auto;
display: block;
}
.img p{
text-align: justify;
width:250px;
display: block;
}
.bottom{
padding: 15px;
}
footer{
background: #660000;
width: 85%;
height:100px;
margin-right: 10%;
margin-left: 10%;
}
footer a{
color: #ffffff;
text-decoration: none;
font-size: 10px;
}
footer label{
color: #ffffff;
font-size: 10px;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
Since both of these elements are within a container. You could easily set the percentage of the containers child elements to the same percentage. This way the image and the paragraph will always be the same width, no matter what your container size may be.
EX:
.image img, .image p { width: 90% }
I'm trying to line up text and an image below a title acting as a header, but the image keeps throwing off the divider between entries and messing up the page's alignment. Here's what it looks like (Django templates in use here)
Here's the code:
<script src="/static/js/downloadEntry.js" type="text/javascript"></script>
{% for entry in entries %}
<div class="entry">
<label class="titleText">{{ entry.title }}</label>
<div class="contentContainer">
{% if entry.image %}
<img class="image" src="{{ entry.image.url }}">
{% endif %}
<p class="contentText">{{ entry.content }}</p>
</div>
<script>styleTitle("{{ entry.title }}");</script>
</div>
<hr class="entryDivider">
{% endfor %}
The relevant CSS:
.entryDivider {
margin-top: 10px;
size: 1px;
width: 66%;
}
.entry {
width: 66%;
margin-top: 30px;
margin-bottom: 10px;
}
.titleText {
font-family: "Helvetica Neue";
font-size: 24px;
font-weight: bold;
color: #666666;
text-align: left;
font-style: normal;
text-transform: uppercase;
display: block;
margin-bottom: 15px;
}
.contentContainer {
width:100%;
display: block;
}
.contentText {
font-family: "Helvetica Neue";
font-size: 14px;
text-align: left;
font-weight: 200;
display: block;
overflow: hidden;
}
.image {
float: left;
display: block;
background-color: #ff0000;
margin-right: 15px;
width: 90px;
height: 80px;
}
I've tried a couple of different techniques to no avail. Ideally it looks something like this:
http://jsfiddle.net/cSazm/5/, but within the div container. Something like:
[Title]
[Image, if one exists] [Content]
[Divider]
Here's a screenshot of how this is rendered:
Any suggestions? I don't have much experience with frontend work (which is probably apparent)
Is this what you are looking for?
.content {
width: 100%;
}
.image {
float: left;
padding-right: 5px;
}
.entryDivider {
margin-top: 10px;
size: 1px;
width: 66%;
}
http://jsfiddle.net/XZ2Ax/
Just put everything in a div above the divider.
In your containing div (in this case .entry), you can clear it:
.entry {
width: 66%;
margin-top: 30px;
margin-bottom: 10px;
clear: both;
}
However, I recommend using something known as a clearfix:
.entry::after {
content: '';
display: table;
clear: both;
}
This way, anything after the .entry will be cleared automatically.
As a side note, I recommend removing the hr elements and using border-bottom on the .entry.
See jsFiddle.
Is this what you are looking to do? JSFiddle
div{
display: block;
width: 100%;
overflow: hidden;
padding:10px 10px 0;
}
h2 {
font-weight: bold;
font-size: 20px;
margin-bottom: 5px;
}
img{
float:left;
margin-right: 10px;
vertical-align:top;
}
p{
display: block;
overflow: hidden;
}
div hr {
clear: both;
border: none;
padding-top: 5px;
margin:0;
border-bottom: 1px solid #ccc;
}
after floated elements you should have a clearing element so that the floats dont "mix"
CSS
.clearfix {
clear:both;
height:0px;
}
HTML
<div>
<img src="http://lorempixel.com/g/80/80/" />
<p>
Lorem ipsum dolor sit amet,
</p>
</div>
<br class="clearfix" />
<div>
<img src="http://lorempixel.com/g/80/80/" />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>
</div>
JSFiddle