i'm having trouble giving a footer 100% width it causes a horizontal scroll can u see something ? When i lower the 100% it makes a orange bar at the side because that's the background, i read that having a padding on the element could cause it but i'm pretty sure there isn't any padding present on the content of my footer bar so could anyone help out?
/* CSS Document */
/*-- RESET | Based on Eric Meyer --*/
ol, ul {
list-style: none;
padding:0px;
}
li {
line-height:25px;
}
/*-- BODY BORDER --*/
.bt, .br, .bb, .bl {
background: white; position: fixed; z-index: 99999;
}
.bl, .br {
top: 0; bottom: 0; width: 5px;
}
.bt, .bb {
left: 0; right: 0; height: 5px;
}
.bt {
top: 0;
}
.br {
right: 0;
}
.bb {
bottom: 0;
}
.bl {
left: 0;
}
/*-- MAIN --*/
html, body {
height: 100%;
}
body {
text-transform: uppercase;
background: #FCD9CA;
}
.clear {
clear: both; overflow: hidden;
}
.sidebar {
padding: 15px 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.sb-slider {
padding-top:0px;
margin-top:0px;
}
.container {
padding-bottom:100px;
}
.logo {
padding-left:15%;
position:relative;
top:125px;
margin: 0 auto;
}
.top {
padding-left:5%;
position:relative;
top:200px;
margin: 0 auto;
}
.footercontact {
padding: 15px 0;
}
.footer {
padding-left:5%
}
footer {
border-top: 1px solid black;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
background:#fff;
}
i've made a fiddle to show you the problem
http://jsfiddle.net/9gh3ht48/2/
As #Lal mentioned the problem is caused by the left padding on .footer.
I'm assuming this padding is a necessary part of your design so a better solution would be to set the box-sizing property of your footer to border-box:
.footer {
padding-left:5%
box-sizing: border-box;
}
DEMO
Edit
Ok try this:
DEMO
.footer {
padding-left:5%;
margin: 0;
}
Just remove the 100% width from your footer and add right:0; instead.
That rule combined with left:0 will ensure the element spans the full width and any padding and borders will not cause a scroll.
(The box-sizing rule should have worked also assuming you had the vendor prefixes for older browsers and weren't supporting less than IE8)
See this fiddle
Remove padding-left:5% from
.footer {
padding-left:5%
}
When you add 15% for left padding, the remaining width available is only 85%.But you are setting width as 100% which causes an Horizontal scroll to your page..
So, if you want that 15% padding set your width as 85% only..
I added:
display: inline;
to .footer, and it fixed the problem, although you will need to change the padding.
Add a width of 100% to the class footer: .footer. This will resolve your issue.
.footer {
padding-left: 5%;
box-sizing: border-box;
width: 100%;
}
Related
enter image description here
LINK: https://gta.stillwaters.io/
Can anyone help me make the entire header area height 45px? That's about 3 times the size of the font and also, decrease the logo height also. The logo and header area seems too long in height. If that entire could be reduced to 45px?
header.hidden-phone {height: 45px;}
Code above doesn't seem to work.
You have a padding on your header, the rendering engine goes outwards. it first renders the inner box with the specified height then it renders a "frame" that contains that box with the width specified on each side.
I recommend you to disable padding on this element. more information at w3 schools box model
and there is another attribute that can help Box-sizing
You have to remove the padding on #sp-header-wrapper in order to get your header to 45px.
So change this:
#sp-header-wrapper {
padding: 20px 0 !important;
}
#sp-header-wrapper {
padding: 10px 0;
}
#sp-header-wrapper {
padding: 10px 0;
background-color: #FAFAFA;
position: relative;
width: 100%;
z-index: 999;
}
#sp-main-menu ul {
list-style: none;
margin: 0;
padding: 0 0 1% 0;
}
To this:
#sp-header-wrapper {padding: 0 !important;}
#sp-header-wrapper {
background-color: #FAFAFA;
position: relative;
width: 100%;
z-index: 999;
}
#sp-main-menu ul {
list-style: none;
margin: 0;
}
Then resize your logo:
div#sp-logo {
height: inherit;
}
div.logo-wrapper {
text-align: left;
height: inherit;
padding: 3px;
}
img.image-logo {
height: 100%;
}
Here is the result:
I have used Ryan's sticky footer in asp.net project. I have used it on master page and on child master page I have a vertical navbar. The problem is the footer goes behind the navbar. I want it to be on the top of the navbar. Also there is is a scrollable horizontal space on right side in child master page which I dont want. Also some of my pages have less content so how can I change thier height according to my wish so that I can set the footer accordingly.
vertical navbar:
#sidebar-nav ul{
background-color:#2ca8d2;
color: white;
height: 100%;
padding: 0;
position: fixed;
left: 0;
top: 50px;
width: 19%;
z-index: 2;
display:block;
}
#sidebar-nav li a {
display: block;
color: white;
padding: 8px 0 8px 16px;
text-decoration:none;
font-size:16px;
border-bottom: 1px solid #fff;
}
#sidebar-nav li a.active {
background-color: #4CAF50;
color: white;
}
#sidebar-nav li a:hover:not(.active) {
background-color: orangered;
color: white;
}
footer:
* {
margin: 0;
}
form, html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto 200px;
}
.footer, .push
{
height: 200px;
background-color:#333;
z-index:10;
}
.footer, .push {
clear: both;
}
I want it to be on the top of the navbar.
Since you have
z-index: 2;
on your vertical navbar, you would need a higher z-index, such as 3, on the main container of your footer. You have z-index 10 on the footer class, but I dont know whats nested in what with your html file. Could you post the html code for the footer and vertical navbar too?
I'm having trouble eliminating the vertical scrollbar when applying a 50px padding (black) to the .background style.
html, body {height:100%; margin: 0; padding:0;}
div.background
{
width: 500px;
height: 100%;
background-color: black;
padding: 50px;
}
div.transbox
{
width: 100%;
height: 100%;
background-color: #ffffff;
position: relative;
background-color: rgba(255,255,255,0.3);
}
div.transbox p
{
margin: 50px;
position: absolute;
bottom: 0;
color: white;
}
This is what it looks like
http://jsfiddle.net/sm6LLgp4/2/
If I remove the top and bottom padding (black), the scrollbars are gone, but I've also lost my padding:
http://jsfiddle.net/sm6LLgp4/3/
How can I maintain the 50px padding all around without the vertical scrollbar?
Insert box-sizing:border:box, than it works.
*{
box-sizing:border-box;
}
I got some problems with layouting in CSS. Here is the code I am talking about: Fiddle.
The <div id="header"> should have the height of the <div id="menubuttons"> which I marked red.
I always thought that if you don't state the height of a div it will get the height of it's children.
The <div class="contentLine> is stuck to the <div id="theme"> although I defined margin-top: 20px;.
The right column always has greater margin than the left column. I want both to have the same margin to the browser window.
CSS
body {
margin: 0 auto;
padding: 0;
font-family:'Share', cursive;
}
#header {
width: 100%;
vertical-align: middle;
}
#header_logo {
width:;
float: left;
margin: 11px 20px 20px 20px;
background-color:;
}
#menubuttons {
margin-right: 0;
margin-top: 0;
height: 2.5em;
line-height: 2.5em;
display: inline-block;
background-color: red;
}
#menubuttons ul {
list-style-type: none;
margin:0;
padding:0;
}
#menubuttons li {
float: left;
margin-right: 20px;
}
a {
font-family:'Share', cursive;
}
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:active {
text-decoration:underline;
}
#theme {
width: 100%;
height: 400px;
background-color: green;
margin-top: 0;
float: left;
}
.contentLine {
margin: 0 auto;
margin-top: 20px;
width: 96%;
}
.contentLine .column {
float: left;
margin: 0;
width: 30%;
margin-right: 1%;
padding: 1%;
position: inherit;
/* shadow for seeing div boundaries */
box-shadow: 0 0 1px black inset;
}
.contentLine #last {
margin-right: 0;
}
Let me go 1 by 1
1) Your <div id="header"> contains floated elements, you need to clear that, so use overflow: hidden; on parent element i.e #header
2) Again, you've floated #theme but you've set it to width: 100%; so you don't need float there.
3) About the last you need to set the margins accordingly, right now it's 1% so you need to calculate this correctly, I would like to suggest you to use box-sizing: border-box; and set 33% width for each element and than apply padding-right
Demo
Also make sure you clear your floating elements which are nested inside contentLine.
If you are not one of those IE fans, than you can use the snippet below, which will self clear the parent element in a better way.
.clear:after { /* Much much better than overflow: hidden; */
content: "";
display: table;
clear: both;
}
Update your html
</ul>
<!--Menu ends here -->
</div>
<!--menubuttons ends here -->
<!--Add following div to your code -->
<div class="clear"></div>
</div>
<div id="theme">
Update your CSS
.clear{
clear:both;
}
This should help.
- will be reusable also.
This question would have been a duplicate of header and footer fixed, content scrollable and Fixed header, footer with scrollable content if not for one detail, which is very important for me - I do not want to specify a fixed height and width for the content.
http://jsfiddle.net/mark69_fnd/PWRDa/ contains a real form with dummy data, demonstrating the problem - resizing the window makes the scrollbars appear, but on the page, rather than on the form. In the current layout the menubar and the statusbar are scrolled out of view and I want them to remain fixed, while the form data gets scrolled.
Please, do not provide a solution with absolute width and/or height. I prefer calculating them in javascript, rather than baking them into the CSS, unless it is 100%. Of course, pure HTML/CSS solution is preferable.
Here is the CSS:
html, body, .yui3-app-views {
height: 100%;
width: 100%;
}
.container {
position: relative; /* needed for footer positioning*/
margin: 0 auto;
height: auto;
min-height: 100%;
background-color: #eee;
}
.content {
background-color: #ddd;
padding: 0em 0em 2em; /* bottom padding for footer */
overflow: auto;
}
#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
background-color: #ccc;
}
#status {
border: solid 1px #000000;
}
#status .error {
color: red;
font-weight: bold;
}
/* ------------------------------------------------------------------------------------*/
.char {
display: inline-block;
vertical-align: top;
}
.line {
white-space: nowrap;
}
/* --------------------------------- fieldset and legend ------------------------------*/
.fieldset {
border: 2px groove threedface;
margin-top: 1em;
}
.fakeFieldset {
padding: 2px;
}
.fieldset > div.legend:first-child {
display: inline-block;
text-align: left;
margin-left: 10px;
background: #ddd;
position: relative;
top: -0.7em;
}
.merge-bottom {
margin-bottom: -2px;
}
/* ------------------------------------ Forms ------------------------------*/
form div {
white-space: nowrap;
}
form select, form input {
margin: 2px;
border: 1px groove;
}
form label:not(.same-line) {
width: 8em;
text-align: right;
display: inline-block
}
#cust-balance {
text-align: center;
}
.ccExpDate {
width: 2em;
}
#cust-salutation {
width: 4em;
}
.postalCode {
width: 7em;
}
#cust-ccAddress {
width: 20em;
}
// Updated with input from asker.
This works great. Mine have widths set to 100%, but of course you can do that in JS if you want.
You need to give the header and the footer position:fixed
I also put some padding in the .content div to make room for the top header.
Like the following:
html, body, .yui3-app-views {
height: 100%;
width: 100%;
}
.content {
background-color: #ddd;
padding: 2em 0em; /* padding for footer and header */
}
.menubar {
position: fixed;
top: 0px;
width: 100%;
z-index:1;
}
#footer {
position: fixed;
width: 100%;
bottom: 0; /* stick to bottom */
background-color: #ccc;
}