I'm learning now CSS.
As a practice, I am trying to create a simple html5 template with the header, section, footer, aside, nav tags - in there correct location.
in every tag area, I put the tag name with a different background and font color.
the problem is, that I can't vertical-align the tag text to the middle.
I tried to create a inner element - span, and set it like this:
span {
height:100px;
line-height:100px;
vertical-align:middle;
}
or like this:
span {
height:100%;
line-height:100%;
vertical-align:middle;
}
but it only sets the text exactly in the vertical middle of a element, when the browser is in a specific size. every change, changes the location of the text.
this is the full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" />
<script>
</script>
<style>
body,html{
height:100%;
width:100%;
}
header{
text-align:center;
color:blue;
background:violet;
height:15%;
}
aside{
text-align:center;
float:left;
width:20%;
height:100%;
display:inline-block;
color:red;
background:lime;
}
section{
text-align:center;
float:left;
width:60%;
height:100%;
display:inline-block;
color:pink;
background:tan;
}
nav{
text-align:center;
float:left;
width:20%;
height:100%;
display:inline-block;
color:cyan;
background:orange;
}
footer{
text-align:center;
color:gold;
height:15%;
background:yellow;
}
span {
height:100%;
line-height:100%;
vertical-align:middle;
}
#center-page{
height:70%;
font-size:150%;
}
</style>
</head>
<body>
<header>
<span>header</span>
</header>
<div id="center-page">
<aside>
<span>aside</span>
</aside>
<section>
<span>section</span>
</section>
<nav>
<span>nav</span>
</nav>
</div>
<footer>
<span>footer</span>
</footer>
</body>
</html>
thanks!
You can try flexbox:
header, aside, section, nav, footer {
display: flex; /* Magic begins */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
min-width: 0; /* Ignore the width of the content */
}
body, html {
height: 100%;
margin: 0;
}
header, aside, section, nav, footer {
display: flex;
justify-content: center;
align-items: center;
min-width: 0;
}
header {
color: blue;
background: violet;
height: 15%;
}
#center-page {
display: flex;
}
aside {
flex: 2;
color: red;
background: lime;
}
section {
flex: 6;
color: pink;
background: tan;
}
nav {
flex: 2;
color: cyan;
background: orange;
}
footer {
color: gold;
height: 15%;
background: yellow;
}
#center-page {
height: 70%;
font-size: 150%;
}
<header>header</header>
<div id="center-page">
<aside>aside</aside>
<section>section</section>
<nav>nav</nav>
</div>
<footer>footer</footer>
Here's an alternate solution, and is awesome to keep as a reference. Taken from: http://vanseodesign.com/css/vertical-centering/
CSS Table Method
"...vertical-align applies to table cells which leads us to this method. We’ll display our elements as table and table cell and then use the vertical-align property to center the content."
HTML
<div id="parent">
<div id="child">Content here</div>
</div>
CSS
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
Related
I have a simple unordered list beside beside two other divs, all 3 contained within a parent container. Here's how it looks like: https://jsfiddle.net/f0bz4hc0/1/. If you zoom in, you can see that all 3 have borders around them, but the borders around the list items and the anchors extend beyond the container's bottom border while the two other divs are snug. Why does this happen and how can I fix it so that everything is within the container?
<!doctype html>
<html>
<head>
<title>practice</title>
<meta charset='utf-8' />
<style type='text/css'>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.page{
width:960px;
height:300px;
margin:0 auto;
border:1px solid red;
}
.row{
width:100%;
}
.header{
background-color:black;
height:40px;
}
.logo{
background-color:orange;
height:100%;
width:40px;
float:left;
display: inline-block;
}
.home{
display: inline-block;
height:40px;
width:40px;
float:left;
border:1px solid cyan;
}
.home img{
width:100%;
height:100%;
}
ul{
float:left;
height:100%;
}
ul li{
display: inline-block;
border:1px solid teal;
}
a{
display: inline-block;
color:white;
height:40px;
line-height: 40px;
border:1px solid orange;
}
</style>
</head>
<body>
<div class='page'>
<div class='header row'>
<div class='logo'></div>
<div class='home'><img src='house.png' /></div>
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</div>
</div>
</body>
</html>
If you remove the set height on .header and make it inline-block, you'll see that the borders of on your anchors remain contained in their parent.
.header {
/*height: 40px;*/
background-color:black;
display: inline-block;
}
https://jsfiddle.net/q5mxbywp/
I am trying to make a UL or DIV's where each list item / child div is full screen (100% width 100% height) and floated left so i can scroll horizontally through them, any idea how I can do this? here is my code but it is not working as I had thought
HTML:
<html>
<body>
<div id="site-holder">
<div class="toronto-full">
TESTING
</div>
<div class="montreal-full">
TESTING
</div>
</div>
</body>
</html>
CSS:
html { width:150%; height:100%; margin:0; padding:0; }
body { width:150%; height:100%; margin:0; padding:0; }
#site-holder { width:100%; height:100%; margin:0; padding:0; float:left; }
.toronto-full {background-color:green; width:50%; height:100%; float:left; }
.montreal-full {background-color:red; width:50%; height:100%; float:left; }
Any Ideas?
FIDDLE
Try this:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#site-holder {
width:100%;
height:100%;
margin:0;
padding:0;
white-space: nowrap;
font-size: 0;
}
.toronto-full, .montreal-full {
width: 100%;
height: 100%;
display: inline-block;
vertical-align: top; /* this line added in edit */
font-size: initial;
}
.toronto-full {
background: green;
}
.montreal-full {
background: red;
}
EDIT:
Review the code again. I added a line which fixes the problem with vertical mismatch of the divs.
Why do you even want to use float for this?
You could use inline-block display;
.toronto-full {
background-color:green;
width:50%;
height:100%;
display: inline-block;
}
.montreal-full {
background-color:red;
width:50%;
height:100%;
display: inline-block;
}
Example: http://jsfiddle.net/7DxFE/
How can I have proper borders around the midItem element?
http://jsfiddle.net/PmfLm/
Here is the minified code of the same fiddle,
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style type="text/css">
span,.midItem {
border-style: solid;
}
.midItem {
border-color: blue;
padding: 5px;
}
p {
text-align:justify;
}
.leftPage,.rightPage{
display:inline-block;
width: 33%;
padding: 5px;
}
.centerBox {
display:table-cell;
text-align: center;
vertical-align: middle;
}
.leftBox,.rightBox {
display: table;
border-style:dotted;
border-width:5px;
width: 100px;
height: 100px;
border-color:green;
}
.leftBox,.leftPage {
float:left;
}
.rightBox,.rightPage {
float:right;
}
</style>
</head>
<body>
<span class="leftPage"><span class="leftBox"><p class="centerBox">Leftbox</p></span>
<p>Some Text</p>
</span>
<span class="rightPage"><span class="rightBox"><p class="centerBox">rightBox</p></span>
<p>SomeText</p>
</span>
<p class="midItem">SomeText</p>
</body>
</html>
Not getting your question properly but do you need something like this? If yes than clear your floats, use overflow: hidden; for the container div
Demo
CSS
span,.midItem {
border-style: solid;
overflow: hidden;
}
If you use table-cell to get the same height in all elements, then you should set it to all three elements
.midItem {
border-color: blue;
padding: 5px;
display:table-cell;
}
.leftBox,.leftPage {
display:table-cell;
}
.rightBox,.rightPage {
display:table-cell;
}
http://jsfiddle.net/PmfLm/3/
I do NOT want a FIXED footer, I need a STICKY footer.
My sticky footer worked fine at first but when the content is at a certain height, there is a margin between the footer and bottom of the page.
Try messing with the browser height and content div height, and you should see where the problem is.
It leaves an awkward margin between the footer and the bottom of the page.
Thank you in advance.
CSS Code:
html, body {
height:100%;
margin:0;
}
body {
color:#FFF;
font:16px Tahoma, sans-serif;
text-align:center;
}
a {
text-decoration:none;
}
#wrapper {
height:100%;
margin:0 auto;
min-height:100%;
padding-bottom:-30px;
width:985px;
}
#content {
background:#F00;
height:950px;
}
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
}
#footer span {
color:#FFF;
font-size:16px;
padding-right:10px;
}
#push {
clear:both;
height:30px;
}
HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Bad Footer</title>
<link rel="stylesheet" href="badfooter.css" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="content">
<span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span>
</div>
<div id="push"></div>
</div>
<div id="footer">
<span>About Us</span>
<span> | </span>
<span>Contact Us</span>
<span> | </span>
<span>Home</span>
</div>
</body>
Just add position: fixed; to your footer class in your css:
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
position: fixed; /*add this new property*/
}
-----UPDATE-----
If you need a footer that stays at the bottom you need two things:
#wrapper {
/*height:100%;*/ /*you need to comment this height*/
margin:0 auto;
min-height:100%;
padding-bottom:-30px;
width:985px;
position: relative; /*and you need to add this */
}
#footer {
background:#000;
border-top:1px solid #00F0FF;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
position: relative; /*use relative position*/
}
#wrapper {
/*height:100%;*/ /*you need to comment this height*/
margin: 0 auto;
min-height: 100%;
min-height: 700px; /* only for Demo purposes */
padding-bottom: -30px;
width: 985px;
position: relative; /*and you need to add this */
}
#footer {
background: #000;
border-top: 1px solid #00F0FF;
height: 30px;
margin-top: -30px;
padding: 5px 0;
width: 100%;
position: relative; /*use relative position*/
}
<div id="wrapper">
<div id="content">
<span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span>
</div>
<div id="push"></div>
</div>
<div id="footer">
<span>About Us</span>
<span> | </span>
<span>Contact Us</span>
<span> | </span>
<span>Home</span>
</div>
Add position: fixed to the footer class. Note it doesn't work in certain old versions of Internet Explorer. http://jsfiddle.net/kAQyK/
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
position: fixed;
bottom: 0px;
left: 0px;
}
See http://tagsoup.com/cookbook/css/fixed/ for examples how to make it also work in IE
I was having the same issue for ages and nothing seemed to work then I realised that the whitespace I was seeing under my footer was not actually whitespace at all but the overflow from my footer with white text on a white background. All I had to do was to add:
overflow:hidden
to my footer in my css.
If anyone wants the solution that worked for me then it is the same as http://getbootstrap.com/2.3.2/examples/sticky-footer.html but with the added overflow:hidden
DISPLAY TABLE = NO JS and NO fixed height!
Works in modern browsers ( IE 8 + ) - I tested it in several browser and it all seemed to work well.
I discovered this solution because I needed a sticky footer without fixed height and without JS. Code is below.
Explanation: Basically you have a container div with 2 child elements: a wrapper and a footer. Put everything you need on the page ( exept the footer ) in the wrapper. The container is set to display: table; The wrapper is set to display: table-row; If you set the html, body and wrapper to height: 100%, the footer will stick to the bottom.
The footer is set to display: table; as well. This is necessary, to get the margin of child elements. You could also set the footer to display: table-row; This will not allow you to set margin-top on the footer. You need to get creative with more nested elements in that case.
The solution: https://jsfiddle.net/0pzy0Ld1/15/
And with more content: http://jantimon.nl/playground/footer_table.html
/* THIS IS THE MAGIC */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body {
margin: 0;
padding: 0;
}
html,
body,
#container,
#wrapper {
height: 100%;
}
#container,
#wrapper,
#footer {
width: 100%;
}
#container,
#footer {
display: table;
}
#wrapper {
display: table-row;
}
/* THIS IS JUST DECORATIVE STYLING */
html {
font-family: sans-serif;
}
#header,
#footer {
text-align: center;
background: black;
color: white;
}
#header {
padding: 1em;
}
#content {
background: orange;
padding: 1em;
}
#footer {
margin-top: 1em; /* only possible if footer has display: table !*/
}
<div id="container">
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="content">
CONTENT
<br>
<br>some more content
<br>
<br>even more content
</div>
</div>
<div id="footer">
<p>
FOOTER
</p>
<br>
<br>
<p>
MORE FOOTER
</p>
</div>
</div>
I'm working on a brand new website and I'm trying to just get the basic layout going. I am using the ASP.NET MVC 4 generated HTML and I would like to get the DIV named body to fill the available space after making room for the header and thus anchoring the footer to the bottom of the browser window. However, what I'm getting right now is three panels just stacked on top of each other.
I would like a solution that would work if the browser supported HTML5 and one if it didn't
Please note I've inlined comments in the CSS to try and explain what I've tried.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">#Html.ActionLink("Title", "Index", "Home")</p>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - ACME. All rights reserved.</p>
</div>
<div class="float-right">
<ul id="social">
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div>
</div>
</footer>
#RenderSection("scripts", required: false)
</body>
</html>
CSS
body {
/* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF THE BODY ITSELF WOULD SPAN */
/* WITH NO OTHER CSS APPLIED TO THE body ELEMENT */
/*height: fill-available;*/
/*height: 100%*/
}
/* general layout
----------------------------------------------------------*/
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear-fix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 960px;
}
#body {
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
/* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF I COULD GET THIS ELEMENT TO SPAN */
/* WITHOUT ANY OTHER CSS APPLIED TO THE body TAG */
/*height: fill-available;*/
/*height: 100%*/
}
.main-content {
/*background: url("../Images/accent.png") no-repeat;*/
padding-left: 10px;
padding-top: 30px;
}
.featured + .main-content {
/*background: url("../Images/heroAccent.png") no-repeat;*/
}
footer {
clear: both;
background-color: #e2e2e2;
font-size: .8em;
height: 100px;
}
/* site title
----------------------------------------------------------*/
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
margin: 20px 0;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
/* social
----------------------------------------------------------*/
ul#social li {
display: inline;
list-style: none;
}
ul#social li a {
color: #999;
text-decoration: none;
}
a.facebook, a.twitter {
display: block;
float: left;
height: 24px;
padding-left: 17px;
text-indent: -9999px;
width: 16px;
}
a.facebook {
background: url("../Images/facebook.png") no-repeat;
}
a.twitter {
background: url("../Images/twitter.png") no-repeat;
}
Just snap the header and footer at the bottom of the page using fixed positioning.
header, footer{ position:fixed; left:0; right:0; z-index:1; }
header{ top:0; }
footer{ bottom:0; }
Then you can give your body the background your div#body had before. The div gets no background and will expand as much as needed.
div#body{ background:none; }
body{ background:#eee; }
This will look like the div would fill the remaining space of the page. Finally give your header and footer a background so that you can't see the background of the body under it.
header, footer{ background:#fff; }
By the way I would suggest removing body margins. body{ margin:0; }
I believe it's a bit impossible to do that with just CSS. You can make a webpage with 100% height like this:
html{
height: 100%;
}
body{
height: 100%;
}
#body{
height: 100%;
}
And then for header, body and footer you can do like this:
header{
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 100%;
background-color: #f00;
}
#body{
bottom: 100px;
left: 0;
position: absolute;
right: 0;
top: 100px;
background-color: #fff;
}
footer{
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
background-color: #ff0;
}
It might work for a bit, but it'll break at some point. When you resize your browser, it'll be running out of room for your #body. If you want a better solution, you should use javascript. In your javascript, calculate how much space you have for your #body, then either adjust the height of header and footer. Or adjust the #body instead.