Here is the problem: I tried to create a page by putting two "p" elements aligned on the same line using display: inline-block in the "p" and the last child with float: right. The code worked fine in Chrome but when I tried it in Edge I noticed a small problem: the footer is not at the bottom of the page as it should be, but creates an empty space of at least 1px.
Page view in Google Chrome: https://i.stack.imgur.com/qfCkl.png
Page view in Microsoft Edge: https://i.stack.imgur.com/bFHz1.png
But if I change the background color of the body to the same as the footer the margin "disappears".
The problem is that I do not want to change the color of the body nor use position: absolute to put the footer down because I tried to fix it that way and it worked but I do not want to use that property. I do not know if it is an Edge display problem or if you guys could tell me if the code is wrong. Here is the code:
<html>
<body>
<div class="wrapper">
<div class="content">
<!-- content of the page -->
</div>
</div>
<footer>
<div class="copyright">
<p>Footer text</p>
<p>More Footer text</p>
</div>
</footer>
</body>
</html>
And this is the CSS:
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
font-family: Sans-Serif;
}
.wrapper, footer {
width: 100%;
}
.content {
margin: 0 auto;
height: 1000px;
width: 90%;
}
footer {
background-color: #333;
}
.copyright {
padding: 20px;
}
.copyright p {
color: #fff;
display: inline-block;
padding: 0px 20px;
}
.copyright p:last-child {
float: right;
}
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
font-family: Sans-Serif;
}
.wrapper, footer {
width: 100%;
}
.content {
margin: 0 auto;
height: 1000px;
width: 90%;
}
footer {
background-color: #333;
}
.copyright {
padding: 20px;
}
.copyright p {
color: #fff;
display: inline-block;
vertical-align: middle;
padding: 0px 20px;
}
.copyright p:last-child {
float: right;
}
<div class="wrapper">
<div class="content">
<!-- content of the page -->
</div>
</div>
<footer>
<div class="copyright">
<p>Footer text</p>
<p>More Footer text</p>
</div>
</footer>
Please add vertical-align: middle; to .copyright p
Related
I know that there were lot's of questions like this one, but I read them and didn't find an answer for my specific situation.
I have a PHP file that generates me a page with heavy amount of data. I want to make it more human friendly so I've created a column design, where each column has it's header, part with content and footer. I wan't to make the part with content scrollable, as it contains multiple divs with data inside.
What I want to achieve is
What I did yet achieve is
and
Yes, those are not original screenshots, but mockups of what I did get. It was easier to make them that way due to fact the data I want to display ain't to be publicly shared ;) You know, private things...
Here is my CSS and part of HTML (responsible for viewing one column):
div.col {
float: left;
width: 22.5%;
margin: 0px 10px 0px 10px;
border: 1px solid gray;
height: 95vh;
}
div.article-container {
overflow: auto;
position: relative;
}
header, footer {
padding: 0.1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
article {
padding: 1em;
overflow: hidden;
border: 1px solid gray;
margin: 10px;
text-align: center;
}
<body>
<div class="col">
<header>
<h4>Header text header text header text</h4>
</header>
<div class="article-container">
<article>
<h2>Nazwa</h2>
<h3>Data</h3>
<p>Osoba</p>
</article>
<article>
<h2>Nazwa</h2>
<h3>Data</h3>
<p>Osoba</p>
</article>
</div>
<footer>Footer text footer text footer text</footer>
</div>
<div class="col">
<header>
<h4>Header text header text header text</h4>
</header>
<article>
<h2>Nazwa</h2>
<h3>Data</h3>
<p>Osoba</p>
</article>
<article>
<h2>Nazwa</h2>
<h3>Data</h3>
<p>Osoba</p>
</article>
<footer>Footer text footer text footer text</footer>
</div>
</body>
Can you please help me find an answer for: how to properly combine CSS and HTML here to get the fixed header, fixed footer and a scrollable space with content between them?
Thank you all in advance :)
If you play around with positioning, you might be able to work it out. The header/footer need to have a relatively static height though, as it needs to be used to position the article-container.
Example 1 (static heights)
* { box-sizing: border-box; }
div.col {
float: left;
width: 22.5%;
margin: 0px 10px 0px 10px;
border: 1px solid;
height: 95vh;
position: relative; /* notice */
}
div.article-container {
overflow: auto;
position: absolute;
/* notice */
top: 82px; /* the header height */
bottom: 39px; /* the footer height */
left: 0; right: 0;
}
header {
height: 82px; /* placeholder */
}
footer { /* notice */
position: absolute;
bottom: 0; left: 0; right: 0;
height: 39px; /* placeholder */
}
header, footer {
padding: 0.1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
article {
padding: 1em;
overflow: hidden;
border: 1px solid gray;
margin: 10px;
text-align: center;
}
<body>
<div class="col">
<header>
<h4>Header text header text header text</h4>
</header>
<div class="article-container">
<article>
<h2>Nazwa</h2>
<h3>Data</h3>
<p>Osoba</p>
</article>
<article>
<h2>Nazwa</h2>
<h3>Data</h3>
<p>Osoba</p>
</article>
</div>
<footer>Footer text footer text footer text</footer>
</div>
</body>
Example 2 (flexbox)
* { box-sizing: border-box; }
div.col {
float: left;
width: 22.5%;
margin: 0px 10px 0px 10px;
border: 1px solid;
height: 95vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
.article-container, footer, header {
flex-basis: 0;
}
div.article-container {
overflow-y: auto;
flex-grow: 1;
}
header, footer {
padding: 0.1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
article {
padding: 1em;
overflow: hidden;
border: 1px solid gray;
margin: 10px;
text-align: center;
}
<body>
<div class="col">
<header>
<h4>Header text header text header text</h4>
</header>
<div class="article-container">
<article>
<h2>Nazwa</h2>
<h3>Data</h3>
<p>Osoba</p>
</article>
<article>
<h2>Nazwa</h2>
<h3>Data</h3>
<p>Osoba</p>
</article>
</div>
<footer>Footer text footer text footer text</footer>
</div>
</body>
Your article container needs a fixed height for overflow auto to take effect:
div.article-container {
overflow-x: hidden;
overflow-y: scroll;
position: relative;
height: 80%;
}
Adjust height until it looks good :)
Edit: switched overflow auto to be only in the vertical direction as per #Martin's suggestion.
html, body {
overflow: none;
}
.col {
height: 95vh;
overflow: none;
}
.article-container {
height: calc( 100% - [SUMMARY_OF_HEIGHT_OF_HEADER+HEIGHT_OF_FOOTER] );
// this will give the article-container the correct height in every viewport;
overflow: auto;
}
I am new to HTML and CSS and am having trouble positioning and aligning simple text. I am trying to put the text on the right half of the page and have the text be lined up vertically along the first letter of every line. Right now, the header is all the way on the right side of the page, half cut off. The rest of the the rest of the text is not stacked up on top of one another. Rather, there is one block of text on the left, with the other two stacked on top of each other on the right. I have been stuck on this for hours and have read every article on positioning and alignment, but I can't seem to get it. Thanks for the help!
<div class="aboutme"><h3 id="hello">Header</h3></div>
<div class="aboutme"><p id="school">text</p>
</div>
<div class="aboutme"><p id="personal">
text</p>
</div>
<div class="aboutme"><p id="thanks">
text</p>
</div>
.aboutme > *{
font-family: Avenir Next;
display: inline-block;
text-align:left;
float:left;
margin: 0.5em 0.5em 0.5em 0.5em;
position:relative;
left:4em;
}
#hello{
font-size: 3em;
color: #282828;
right: 3.47em;
font-weight: lighter;
position:relative;
text-align: left;
float: right;
margin: 1em 1em 0em 1em;
}
#school {
width: 30em;
clear:right;
}
#personal {
width: 30em;
clear:right;
}
#thanks {
width: 30em;
clear:right;
}
You need to add margin-left: 50% to the about me class and delete the other positioning you have added.
.aboutme > *{
font-family: Avenir Next;
display: block;
margin-left: 50%
}
#hello{
font-size: 3em;
color: #282828;
font-weight: lighter;
}
#school {
width: 30em;
}
#personal {
width: 30em;
}
#thanks {
width: 30em;
}
<div class="aboutme"><h3 id="hello">Header</h3></div>
<div class="aboutme"><p id="school">text</p>
</div>
<div class="aboutme"><p id="personal">
text</p>
</div>
<div class="aboutme"><p id="thanks">
text</p>
</div>
Link to JSFiddle: https://jsfiddle.net/dLy932Lh/
EDIT: Adding a div to the left side
#leftHalf {
display: inline-block;
width: 50%;
height: 200px;
padding: 0;
margin: 0;
}
#rightHalf {
display: inline-block;
width: calc(50% - 10px);
height: auto;
padding: 0;
margin: 0;
background-color: #FFF;
}
.aboutme > *{
font-family: Avenir Next;
display: block;
}
#hello{
font-size: 3em;
color: #282828;
font-weight: lighter;
}
#school {
width: 30em;
}
#personal {
width: 30em;
}
#thanks {
width: 30em;
}
<div id="container">
<div id="leftHalf">
</div>
<div id="rightHalf">
<div class="aboutme">
<h3 id="hello">Header</h3>
</div>
<div class="aboutme"><p id="school">text</p>
</div>
<div class="aboutme">
<p id="personal">text</p>
</div>
<div class="aboutme">
<p id="thanks">text</p>
</div>
</div>
</div>
It is important to have the display set to inline-block for the left and right divs so that they can both be on the same line (hence the inline) and they can have heights and widths (hence the block).
Put any content you want on the left side of the page in the left div and make sure that it's width is not more than 50%.
I hope this solution works for you!
I'm trying to center the middle paragraph in an HTML footer with no success. I used a layout of floats: the first paragraph float to the left, the third paragraph float to the right and the second (middle) paragraph gets margin 0 auto. I also specified the width of each paragraph to 250px. Can someone explain me what I'm doing wrong?
footer {
background: #fff;
border-top: 1px solid #ece9e9;
border-bottom: 1px solid #ece9e9;
clear: both;
overflow: hidden;
}
footer .footer-content {
margin: 0 auto;
padding: 40px 0 20px 0;
width: 960px;
background-color: red;
}
footer .footer-content > div {
width: 250px;
display: inline-block;
}
footer h5 {
font-size: 15px;
margin-bottom: 25px;
text-transform: uppercase;
}
footer p {
margin-bottom: 25px;
}
.footer-content .footerServices {
background-color: yellow;
float: left;
}
.footer-content .footerNewsLetter {
background-color: yellow;
float: right;
}
.footer-content .footerContact {
background-color: blue;
margin: 0 auto;
}
<footer class="footer">
<div class="footer-content">
<div class="footerServices">
<h5>Services</h5>
<p>
first paragraph
</p>
</div>
<div class="footerContact">
<h5>Contact Us</h5>
<p>
second paragraph
</p>
</div>
<div class="footerNewsLetter">
<h5>Sign To Newsletter</h5>
<p>
third paragraph
</p>
</div>
</div>
</footer>
Just add text-align:center to the .footer-content div:
footer .footer-content {
margin: 0 auto;
padding: 40px 0 20px 0;
width: 960px;
background-color: red;
text-align:center;
}
footer {
background: #fff;
border-top: 1px solid #ece9e9;
border-bottom: 1px solid #ece9e9;
clear: both;
overflow: hidden;
}
footer .footer-content {
margin: 0 auto;
padding: 40px 0 20px 0;
width: 960px;
background-color: red;
text-align:center;
}
footer .footer-content > div {
width: 250px;
display: inline-block;
}
footer h5 {
font-size: 15px;
margin-bottom: 25px;
text-transform: uppercase;
}
footer p {
margin-bottom: 25px;
}
.footer-content .footerServices {
background-color: yellow;
float: left;
}
.footer-content .footerNewsLetter {
background-color: yellow;
float: right;
}
.footer-content .footerContact {
background-color: blue;
margin: 0 auto;
}
.footer-content .footerServices,.footer-content .footerNewsLetter,.footer-content .footerContact{
text-align:left;
}
<footer class="footer">
<div class="footer-content">
<div class="footerServices">
<h5>Services</h5>
<p>
first paragraph
</p>
</div>
<div class="footerContact">
<h5>Contact Us</h5>
<p>
second paragraph
</p>
</div>
<div class="footerNewsLetter">
<h5>Sign To Newsletter</h5>
<p>
third paragraph
</p>
</div>
</div>
</footer>
In order for margin: auto to work, you need to set your middle paragraph to display:block
You have some conceptual errors, first of all, you set display:inline-block for all .footer-content > div and then apply float to first and third.
Please, look at this mine question and relative answer that define a scenario very similar to yours. 2 opposite columns left and right, and a central one that adapt its width to remaining space.
As #j08691 said add text-align:center; also add float:none;
footer .footer-content {
margin: 0 auto;
padding: 40px 0 20px 0;
width: 960px;
background-color: red;text-align:center; float:none;
}
Did you try floating all divs to the left?This way they are going to stack up horizontally next to each other.
Then, you can play around with margins to center the one you want in the middle.
In my attempts to learn some web development, I've been trying to mimic certain websites I come across on the web. Right now I'm trying to emulate something along the lines of this website: http://www.cassidoo.co/
My question is how are you able to force the background image and navigation bar to fit the screen no matter the screen size?
My HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="main">
<h1>Text holder</h1>
<p>Another text holder</p>
</div>
</div>
</div>
<nav>
<div class="container">
<div class="about">
TEXT1
</div>
<div class="resume">
TEX21
</div>
<div class="projects">
TEXT3
</div>
</div>
</nav>
</body>
My CSS:
body {
margin: 0;
}
h1 {
font-weight: 300;
text-align: center;
font-size: 3em;
}
h2 {
font-weight: 300;
text-align: center;
font-size: 2em;
padding-top: 15px;
}
.container p {
font-weight: 200;
text-align: center;
font-size: 1.5em;
}
.jumbotron {
background-image:url('http://goo.gl/o9un96');
height: 800px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotron p {
font-size: 20px;
color: #fff;
}
nav {
width: 100%;
background-color: #efeff1;
height: 50px;
text-align: center;
}
nav .container {
width: 100%;
max-width: 768px;
}
nav div {
display: inline-block;
text-align: center;
width: 18%;
padding: 5px;
}
nav div a {
text-decoration: none;
color: #333333;
font-weight: 800;
font-size: 1.5em;
}
nav div a:hover {
color: red;
}
.main p {
font-weight: 200;
text-align: center;
font-size: 1.5em;
}
Feel free to give pointers or any other information that would be useful.
You're almost there. In your CSS set the body and html's margin to 0 as well as their height as 100%.
html, body {
margin: 0;
height: 100%;
}
Also change your jumbotron class's height to 100%.
Edit Again
Add margin-top: 0; to your h1. Here's all your CSS that I edited.
body, html {
margin: 0;
height: 100%;
}
h1 {
margin-top: 0;
font-weight: 300;
text-align: center;
font-size: 3em;
}
.jumbotron {
background-image:url('http://goo.gl/o9un96');
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
nav {
position: absolute;
bottom: 0;
width: 100%;
background-color: #efeff1;
height: 50px;
text-align: center;
}
<div class="jumbotron">
<div class="container">
<div class="main">
<h1>Text holder</h1>
<p>Another text holder</p>
</div>
</div>
<nav>
<div class="container">
<div class="about">
TEXT1
</div>
<div class="resume">
TEX21
</div>
<div class="projects">
TEXT3
</div>
</div>
</nav>
</div>
From my understanding of your question you'd like to have the navigation "stick" to the bottom of the page, and then be able to scroll past it... Is that right?
You'll need to change you html markup and enclose everything in the first "page" within a container. This container's height needs to be 100% of the viewport.
.jumbotron {
height: 100vh;
}
Then your navigation will need to be positioned at the bottom of this container.
nav {
position: absolute;
bottom: 0;
}
Checkout this fiddle for an example:
http://jsfiddle.net/NateW/3rr59bgg/
The particular site you are pointing to achieves this effect using javascript. The navigation bar is set to be 50px tall in CSS all the time, and then javascript sets the height of the header (your .jumbotron) to full window height minus 50px (the height of the nav). Javascript recalculates this number everytime the browser window is resized.
Imagine this HTML
<body>
<div id="headerBackground">
<h1>Content in header</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</body>
This CSS
body {
padding: 0;
margin: 0;
}
#headerBackground {
min-height: 150px;
background: green
}
nav {
width: 100%;
background-color: #efeff1;
text-align: center;
height: 40px;
}
nav ul {
display: inline-block;
padding: 0;
margin: 0;
vertical-align: top;
}
nav ul li {
float: left;
list-style-type: none;
padding: 10px 25px;
}
h1 {
margin: 0 0 0 0;
}
And this JavaScript (jQuery)
// The first three lines sets the height of the header when the page first load
siteHeight = $(window).height();
navHeight = $('nav').height();
$('#headerBackground').height(siteHeight-navHeight+'px');
// The rest of the code sets new height for the header every time the browser window is resized
$ (window).resize(function() {
siteHeight = $(window).height();
$('#headerBackground').height(siteHeight-navHeight+'px');
});
So, there is no height: 100%; involved here, just constant math. I have set it up for you in a codepen so you can see how it is done :)
http://codepen.io/andersedvardsen/pen/yyzjyq
After searching for this topic for a while in internet, i came here with no clue. I am writing html pages where i am in a need of sticky footer, that should not change it's position even on browser resize.
What i am suffering now is, when i am changing my browser size, i am getting a horizontal and vertical scroll bar. But my footer is displaying above all the div elements. Here is my code.
HTML,
<!-- Main Content -->
<div class="wrapper">
<div id="welcomeDiv">
<label>Welcome Message</label>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div id="footerDiv">
<h5 class="copyright">© 2013 </h5>
<h5 class="footer_info">Career | Help</h5>
</div>
</div>
CSS:
/* Footer */
div#footer {
position: absolute;
bottom: 0;
height: 4em;
clear: both;
width: 1580px;
padding: 0;
border: 1px solid #000;
}
div#footerDiv {
font-size: 10px;
color: grey;
text-align: center;
margin: 0 auto;
width: 100%;
}
div#footerDiv h5 {
font-size: 9pt;
font-weight: 300;
}
div#footerDiv h5.copyright {
margin-left: 10px;
float: left;
}
div#footerDiv h5.footer_info {
margin-right: 10px;
float: right;
}
/* Body Content styles */
.wrapper {
min-height: 100%;
height: auto !important;
}
Can some one please help me what's wrong in my code. I dont want to see cssstickyfooter.com anymore.
Thank you,
Add width and height to body and make footer width as 100%
body{
width: 100%;
height:100%;
margin : 0;
}
div#footer {
position: absolute;
bottom: 0;
height: 4em;
clear: both;
width: 100%;
padding: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
Fiddle: http://jsfiddle.net/sK9Wu/2/