I've a footer styled with CSS which floats at the bottom of the page but when I re-size browser window my footer overlaps my page contents footer is quit big though but it should not overlay the page content.
body {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration: none;
color: #64aba7;
}
strong {
color: #fff
}
.container {
min-height: 500px;
}
.header {
margin-top: 60px;
}
.header,
img {
display: block;
margin-right: auto;
margin-left: auto;
}
.content {
display: block;
margin-right: auto;
margin-left: auto;
text-align: center;
width: 500px;
}
.green-color {
color: #25b04b;
}
.dark-green {
color: #016838;
}
.footer {
width: 100%;
background: #00756f;
position: absolute;
bottom: 0;
}
.footer-container {
display: block;
margin-right: auto;
margin-left: auto;
width: 500px;
padding-top: 20px;
}
.font-size-12px {
font-size: 12px;
color: #64aba7;
font-weight: 50;
}
.one-third {
width: 30%;
float: left;
margin-right: 3%;
padding-bottom: 40px;
}
<div class="container">
<div class="header">
<img src="images/logo-large.png" alt="LegalHQ">
</div>
<div class="content">
<h3 class="green-color">We are redevloping our website and will be back shortly</h3>
<h4 class="dark-green"><i>In the meantime don't hesitate to call or email us</i></h4>
<p class="dark-green">0330 999 1213
<br />hello#legal-hq.co.uk
</p>
</div>
<div class="footer">
<div class="footer-container">
<div class="one-third img-div">
<img src="images/small-logo.gif" alt="LegalHQ">
</div>
<div class="one-third font-size-12px">
<strong>Legal HQ Limited</strong>
<br />Virginia House
<br />Floor 2
<br />5-7 Great Ancoats Street
<br />Manchester
<br />M4 5AD
<br />0161 974 0500
<br />
support#legal-hq.co.uk
<br />
www.legal-hq.co.uk
</div>
<div class="one-third font-size-12px">
<strong>Legal HQ Limited</strong> is regulated by the Ministry of Justice in respect of regulated claims management activities. <strong>Authorisation Number: CRM30929</strong>
www.claimsregulation.gov.uk
</div>
</div>
</div>
</div>
Here is link if you want to experience it yourself. Try and re-size the browser window to the point where you would see footer overlapping the main content.
give the html,body height of 100%, get the footer out of the container, remove position absolute, remove floats from the div-children, and add display:inline-block to them and give them widths of 28% (or remove whitespaces between them) (or otherwise you should use text-align:center for container...but that's another story)
Related
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
I've seen many websites have a container with a 950px width and they have a top header which contains some links and they're aligned with container's margin. Header also have a background color which fills all the area out of container and that's what I want to do too. Probably not well explained, so let's get some example:
StackOverflow has an "header" where there are links like "Questions" "Jobs" "Documentation" "Tags" "Users" and they're aligned with the container, but it also has the background color filling the area out of container. My question is how to get the same header "layout" which has text/links aligned with container and the background color which is stretched over div container.
HTML CODE
<body><div class="container">
<div class="switcher">
<div class="platform-switcher">
<div id="pc-switcher"><img src="pc-logo.png"> PC Games</div>
<div id="xbox-switcher"><img src="xbox-logo.png"> Xbox</div>
<div id="ps4-switcher"><img src="ps4-logo.png"> PS4</div>
</div>
<div class="flags">
<div class="language"></div>
<div class="currency"></div>
</div>
</div>
<div id="search">
<form id="search-form">
<input type="text" id="searchbar">
</form>
</div>
</body>
CSS CODE
.container {
width: 950px;
margin: 0 auto;
}
.platform-switcher {
background-color: black;
height: 40px;
display: inline-block;
}
#search-form {
float: right;
}
.platform-switcher div {
}
#pc-switcher {
color: #cc5a00;
height: 17px;
padding-left: 29px;
padding-top: 12px;
padding-right: 18px;
font-weight: bold;
float: left;
font-size: 11px;
position: relative;
}
#xbox-switcher {
color: #cc5a00;
height: 17px;
padding-left: 29px;
padding-top: 12px;
padding-right: 18px;
font-weight: bold;
float: left;
font-size: 11px;
position: relative;
}
#ps4-switcher {
color: #cc5a00;
height: 17px;
padding-left: 29px;
padding-top: 12px;
padding-right: 18px;
font-weight: bold;
float: left;
font-size: 11px;
position: relative;
}
What I want is to stretch the div's background color of ".platform-switcher" out of "container" and keep aligned, to the container, "platform-switcher" content (PC Games/Xbox etc...).
If I understand, you want to have full-width elements that wrap an element that defines your "container" or "viewport" or "content" width. Here's an example.
* {
margin:0;padding:0;
box-sizing:border-box;
}
header,footer {
background: black;
color: white;
}
.viewport {
width: 90%;
margin:auto;
max-width: 960px;
padding:2em 0;
}
<header>
<div class="viewport">
header
</div>
</header>
<main class="viewport">
content
</main>
<footer>
<p class="viewport">footer</p>
</footer>
I don't know if i understand but i try :D
try this: (add this to the div you want)
background-color: red;
width: 100%;
border-bottom: 1px solid grey; */ for the border */
z-index: 999;
This question has been asked a bunch and I've looked at them all (seemingly). I have a div with some floating content that won't expand to the size of the content. I've added clear:both (to literally every possible line, which has effects, but doesn't solve it), and I've tried every permutation of overflow:hidden or overflow:auto on pretty much every element in here. Just for good measure I have also tried changing the divs to spans.
Whatever I do, if you make the window skinny enough eventually the buttons fall below the area of the div. Why and how can I fix it?
JSFiddle
.confirmation-modal {
z-index: 1; /* Sit on top */
width: 100%; /* Full width */
height: 4rem;
max-height:18rem;
overflow: auto;
text-align: center;
border-radius:5px;
}
.confirmation-raised-panel{
background-color: #ffed83;
padding: 0px;
text-align: center;
height: 4rem; /* Full height */
max-height:18rem;
overflow: auto;
}
.buttons{
float:right;
}
.confirmation-message {
overflow: auto;
margin: 20px 0 0 30px;
font-size: 1.2rem;
font-weight: 400;
float:left;
}
.clear{
clear:both;
}
<div class="confirmation-modal">
<div class="confirmation-raised-panel">
<div class="confirmation-message">
This is a big message that takes up a bunch of space. Yes indeed. Do you like it?
</div>
<div>
<div class="buttons">
<button>Yes, I'm Sure</button>
<button>Cancel</button>
</div>
<br class="clear"/>
</div>
</div>
</div>
Well, you have height: 4rem; in the outer two containers - this prevents them from getting any higher. Delete that or make that min-height, and you are all set:
.confirmation-modal {
z-index: 1;
/* Sit on top */
width: 100%;
/* Full width */
min-height: 4rem;
max-height: 18rem;
overflow: auto;
text-align: center;
border-radius: 5px;
}
.confirmation-raised-panel {
background-color: #ffed83;
padding: 0px;
text-align: center;
min-height: 4rem;
max-height: 18rem;
overflow: auto;
}
.buttons {
float: right;
}
.confirmation-message {
overflow: auto;
margin: 20px 0 0 30px;
font-size: 1.2rem;
font-weight: 400;
float: left;
}
.clear {
clear: both;
}
<div class="confirmation-modal">
<div class="confirmation-raised-panel">
<div class="confirmation-message">
This is a big message that takes up a bunch of space. Yes indeed. Do you like it?
</div>
<div>
<div class="buttons">
<button>Yes, I'm Sure</button>
<button>Cancel</button>
</div>
<br class="clear" />
</div>
</div>
</div>
You have a fixed height for your modal (height: 4rem), he can't expand.
.confirmation-modal {
width: 100%;
text-align: center;
border-radius: 5px;
background-color: #ffed83;
overflow: hidden;
}
.confirmation-message {
margin: 1rem;
font-size: 1.2rem;
font-weight: bold;
}
.buttons{
float: right;
margin: 0 1rem 1rem;
}
<div class="confirmation-modal">
<p class="confirmation-message">This is a big message that takes up a bunch of space. Yes indeed. Do you like it?</p>
<div class="buttons">
<button>Yes, I'm Sure</button>
<button>Cancel</button>
</div>
</div>
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!
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