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/
Related
We are writing a custom website, but we want it to look similar to Wordpress, so we have written the code with the 'sticky' left position bar, and the scrolling right one.
But when you bring the page inward, the right columns wraps under the left one. Any ideas why and how to resolve?
Here is the CSS code:
html, body, section, article, aside {
min-height: 100%;
}
.sidemenu
{
position: sticky;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
float: left;
}
.menu-link a
{
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody
{
float: left;
max-width: 95%;
text-align: left;
padding: 20px;
}
So you have two DIVs, left is 'sidemenu' right is 'pagebody'.
Hope you can help.
To fix the position of the sidebar, you need to used position: fixed;. After that, wrap the sidebar div and body div into one container and set its width to 100% (I also gave the body a margin of 0 at this point to remove gaps).
Give the body div a left-margin equal to the width of the sidebar, then set the width of the body using a calculation (as shown below). I also gave it a really long height to demonstrate scrolling.
You can omit your floats.
Here is the adjusted code:
html,
body,
section,
article,
aside {
min-height: 100%;
margin: 0;
}
.main {
width: 100%;
}
.sidemenu {
position: fixed;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
}
.menu-link a {
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody {
width: calc(100% - 199.75px);
text-align: left;
padding: 20px;
height: 300vh; /**** used to demonstrate scrolling ****/
margin-left: 160px;
background-color: #BBB;
}
<div class="main">
<div class="sidemenu">
Side Menu
</div>
<div class="pagebody">
body
</div>
</div>
I am trying to make a file hierarchy in html/css and I can't get these labels or the divs they are in to expand to full width. They only expand to the width of the visible area but I want the width of what they are in. Here is the fiddle to see what I am talking about. The grey area needs to all line up on the right.
a = 3;
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
div.hierarchy {
position: relative;
overflow: auto;
border-right: 1px solid grey;
width: 150px;
left: 0;
top: 0;
bottom: 0;
height: 100%;
}
div.hierarchy label {
display: block;
min-width: 100%;
background: #eee;
white-space: nowrap;
}
div.directory {
padding-left: 20px;
width: 100%;
}
div.directory label {
border: 1px solid grey;
width: 100%;
cursor: pointer;
}
<div class="hierarchy">
<label>Hierarchy</label>
<div class="directory">
<label>src</label>
<div class="directory">
<div class="file"><label>test.txt</label></div>
<div class="file"><label>readme.txt</label></div>
<div class="file"><label>a really long filename.txt</label></div>
</div>
</div>
</div>
You need to change your div.directory CSS class as follows:
div.directory {
display:inline-block;
padding-left: 20px;
}
I made the following changes:
1) Added display:inline-block;
2) Removed the width:100%; rule.
Here is an example:
http://jsfiddle.net/nnd7jyj1/
(As a side note, it's generally bad practice in CSS to apply both a width and either a padding or margin rule to the same element. The reason for this is that some browsers interpret the width to include the padding/margin and some don't, which leads to inconsistent results)
Simply add display:inline-block; to div.directory
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
div.hierarchy {
position: relative;
overflow: auto;
border-right: 1px solid grey;
width: 150px;
left: 0;
top: 0;
bottom: 0;
height: 100%;
}
div.hierarchy label {
display: block;
min-width: 100%;
background: #eee;
white-space: nowrap;
}
div.directory {
padding-left: 20px;
/* width: 100%; */
/* added */
display: inline-block;
}
div.directory label {
border: 1px solid grey;
width: 100%;
cursor: pointer;
}
<div class="hierarchy">
<label>Hierarchy</label>
<div class="directory">
<label>src</label>
<div class="directory">
<div class="file">
<label>test.txt</label>
</div>
<div class="file">
<label>readme.txt</label>
</div>
<div class="file">
<label>a really long filename.txt</label>
</div>
</div>
</div>
</div>
How can I remove the white border on bottom of the browser (google chrome)?
This is the code I have used:
footer {
color: white;
width: 101%;
margin-left: -8px;
background-color: #343434;
margin-left: -16px;
width: 101.5%;
margin-top: -8px;
height: 40px;
z-index: 100;
}
footer > div {
width: 1000px;
margin: 0 auto;
}
<main>
<!--main things-->
</main>
<footer>
<div>
<p>FastCycle werdt gecreëerd door HP-programming vzw. Copyright © 2015</p>
</div>
</footer>
I have try to place the margin-button to set on zero but it didn't help. Also I have place the margin-left to -16px and width to 101.5%? Why?
Can anyone help me?Thanks
You can try adding the following to the <body> tag:
<body style="padding: 0; margin: 0;">
or alternatively, create a new CSS class:
body {
padding: 0;
margin: 0;
}
If that doesn't work, in Chrome, if you press F12, it will bring up a panel that allows you to view the styles of elements. Hover over the elements until you find the one that's creating the whitespace, and remove the padding/margin from it.
Try to add to your css
body{
margin:0;
}
And some cleaning for your css footer
footer {
color: white;
width: 100%;
background-color: #343434;
height: 40px;
z-index: 100;
bottom:0;
}
footer > div {
width: 1000px;
margin: 0 auto;
}
Use this HTML:
<body>
<div id="footer">
<div id="inner">
FastCycle werdt gecreerd door HP-programming vzw. Copyright © 2015
</div>
</div>
</body>
Use this CSS:
body {
margin: 0px;
padding: 0px;
}
#footer {
background-color: #343434;
color: #ffffff;
height: 40px;
margin: 0px;
padding: 0px;
width: 100%;
}
#inner {
margin: 0px 0px 0px -500px;
padding: 0px;
position: relative;
left: 50%;
top: 0px;
width: 1000px;
}
Also, you've set the Width and the Left Margin twice with 2 different values so you might want to clean that up. Regardless my code gives the same result except without the white space. Feel free to add back some of the stuff I've taken out if other elements depend on it.
Before you roll your eyes and move on, I know how to solve this problem by using a fixed height and absolution positioning with top: and bottom:, but I want to solve it without using fixed heights. I want to learn more about CSS so I'm trying to solve this a different way.
I have set up a typical navbar running across the top, and then a scrolling content div below.
However! How do I fit the bottom scrolling div container to the remaining space without using absolute coordinates? I can't do position: absolute, because then I'd need to know the height of the navbar to set "top:". And I can't do "bottom: 0" because I'd have to specify a height.
Here's the JS filddle:
http://jsfiddle.net/8dugffz4/1/
The class of interest is ".result". I currently have the height fixed, which I don't want.
Thanks, y'all.
PT
CSS:
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
.navBar {
width: auto;
overflow: auto;
border-bottom: 1px solid #bbb;
}
.pageBar {
float: right;
}
.pager {
cursor: pointer;
float: left;
border: 1px solid #bbb;
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin: 5px;
margin-left: 0px;
background: #eee;
color: #bbb;
}
.pager:hover {
background: #777;
border: 1px solid black;
color: white;
}
.fliph {
-ms-transform:scale(-1,1); /* IE 9 */
-moz-transform:scale(-1,1); /* Firefox */
-webkit-transform:scale(-1,1); /* Safari and Chrome */
-o-transform:scale(-1,1); /* Opera */
}
.results {
background: gray;
width: 100%;
height: 200px;
overflow: scroll;
}
.line {
height: 10em;
line-height: 10em;
border: 1px solid red;
}
HTML:
<body>
<div class='navBar'>
<div class='pageBar'>
<div class='pager'>◁</div>
<div class='pager'>1</div>
<div class='pager fliph'>◁</div>
</div>
</div>
<div class='results'>
<div class='line'>Line1</div>
<div class='line'>Line2</div>
<div class='line'>Line3</div>
<div class='line'>Line4</div>
</div>
</body>
Here's a solution that uses display: table and can actually achieve fluid heights:
http://jsfiddle.net/8dugffz4/8/
And a minimalistic snippet in case you want to see specifically what I did:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#table {
display: table;
height: 100%;
width: 100%;
}
#table > div {
display: table-row;
}
#navbar {
height: 45px;
opacity: .5;
}
#navbar > div {
height: 100%;
background: black;
}
#results {
height: 100%;
}
#results > div {
height: 100%;
overflow: auto;
background: green;
}
<div id="table">
<div id="navbar">
<div></div>
</div>
<div id="results">
<div></div>
</div>
</div>
If you're just looking for an alternative to the position: absolute method, you could use the height: 100% method:
html, body { height: 100%; }
body { box-sizing: border-box; padding-top: 45px; }
.navBar { height: 45px; margin-top: -45px; }
.results { height: 100%; }
Like so: http://jsfiddle.net/8dugffz4/7/
I have hardly written any HTML/CSS and am already encountering a problem. My header element is not automatically expanding it's height to wrap it's children. I've done a bunch of research and fooled around in the Developer Tools, but can't seem to put my finger on it. I'm sure it's really simple, but what is it I'm overlooking here?
<!DOCYTPE html>
<head>
<title>Page Title</title>
<style>
header {
width: 96%;
height: auto;
position: relative;
margin: 1em auto;
border: 1px solid gray;
border-radius: 5px;
padding: 1em;
}
section {
width: 96%;
position: relative;
margin: 1em auto;
border: 1px solid gray;
border-radius: 5px;
padding: 1em;
}
footer {
width: 96%;
position: relative;
margin: 1em auto;
border: 1px solid gray;
border-radius: 5px;
padding: 1em;
}
h1 {
font-size: 2em;
margin: 1em auto;
}
img {
max-width: 100%;
/* This tells the browser to set the image to the full-width of it's containing element. */
}
.group-icon {
width: 10%;
position: relative;
float: left;
margin: 0 1% 0 0;
}
.group-name {
position: relative;
float: left;
}
</style>
</head>
<body>
<header>
<div class="group-icon">
<img src="images/sailing-icon.png">
</div>
<div class="group-name">
<h1>Pirates in the Bay</h1>
</div>
</header>
<section>
<h2>TEST</h2>
</section>
<section>
<h2>TEST</h2>
</section>
<footer></footer>
</body>
</html>
It's because you've floated elements inside the header (group-name and group-icon).
Try adding overflow: hidden to the header styles. The will 'clear' the floated elements effectively.
See the demo here.
http://jsbin.com/EPelEMA/1/edit
Some more information about the overflow property here: http://css-tricks.com/the-css-overflow-property/