Was cleaning up some html in the footer of a new site and now the footer background color is not displaying for the full height. It was displaying correctly before the clean up and I have not touched anything in the CSS, wondering if I am just overlooking something small.
Current CSS:
#footer {
width: 100%;
margin: 20px 0;
position: relative;
padding: 20px 0;
background-color: rgba(0, 151, 214, 1);
}
Note: I didn't want to specify a height ie. 600px and then have to readjust a height or min-height for several breakpoints.
Thanks!
The footer element (id=footer) is "collapsing" because all of its children are floated. To work around this problem you could apply the clearfix hack. Either you could add a new class called .clearfix and add that class to the footer element, or you could apply this code to the footer element;
#footer:after {
content: "";
display: table;
clear: both;
}
You can read more about the clearfix / group hack here: https://css-tricks.com/snippets/css/clear-fix/
Related
Look at my html + css code: http://jsfiddle.net/nP39E/1/
I'll explain if don't understand what I want to achieve:
I want a page with a div which floating right and takes 250px width and a div that takes width of the rest of the document.
In the left div, you can see that I have some other floating elements, and their heights are effected from the right div. You can see the first (red) row with height that align with the right bar's height and has nothing to do with the real content of its content.
I use group class in order to handle the common floating problem: .group:after { content: ""; display: table; clear: both; }
Can you tell me why it happens?
I just changed CSS for the content div from the last answer:
.content {
background: #888;
padding: 10px;
position: absolute;
right: 270px;
left: 0;
}
http://jsfiddle.net/nP39E/4/
What you think?
display: table isn't meant to be used for layouts like this, it's more useful for specific equal-height situations.
Properly floating the divs and not using the margin-right to push the left div will work:
.content {
background: #888;
padding: 10px;
float: left;
width: 250px;
}
Fiddle
You are giving margin-right:270px which is wider than the available space,So just remove that. Also you should make content float:left.
.content {
background: #888;
padding: 10px;
float:left;
}
JSFiddle : http://jsfiddle.net/ankur1990/nP39E/3/
I'm trying to implement a sticky footer such as this but if my content is shorter than the footer still appears partially past the fold. I can see about 25px of it and I have to scroll down to see the rest. Here is the relevant CSS:
* {
box-sizing:border-box;
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -60px;
}
.wrapper:after {
content: "";
display: block;
}
.footer, .wrapper:after {height: 60px;}
I'm using Chrome but the problem also exists in Safari. I've tried it without using pseudo selectors but I have similar issues. All of my content is wrapped in the wrapper div except for the footer.
Vertical margins will cause issues when using sticky footer because of how height is calculated, which can be seen here: http://jsfiddle.net/b9Zy7/
Change margin-top to padding-top on p and all is well.
I've read almost every article on this forum about divs and growing height with its content. I don't understand what I'm doing wrong and can't figure it out. Probably it's an easy thing, but I just don't see it any more.
I tried the following CSS but can't get it working:
clear:both;
float: left;
overflow: auto;
overflow: hidden;
none of this all has the desired output.
I posted my code on jsfiddle: http://jsfiddle.net/eAVy3/
You will see that my footer (in red) is at the top in stead of on the bottom. The only way tho get something that looks like it is to give the id page_container a height. But that will be a fixed height and doesn't grow with the content. What to do to get this right?
Working fiddle here: http://jsfiddle.net/eAVy3/3/
Absolute positioning (absolute positioning takes the div out of the normal flow of the document, which means it can't effect other things on the page like the footer)..
You need to float your divs instead:
#kolom_links {
float: left;
margin-left: 100px;
}
#kolom_rechts {
float: left;
margin-left: 70px;
}
Now because both divs inside #page_container are floating, you need use clearfix css:
Add class clearfix: <div id="page_container" class="clearfix">
Then add this clearfix to your CSS:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
You should reconsider making the position absolute;
making the position absolute is puttinf the element out of flow so they don't occupy any height or width of the document.
change to posiion : relative ; and you will start to figure it out
Update 2
try this :
#kolom_links {
width: 400px;
height: auto;
padding-left: 10px;
}
It's a simple CSS issue: a container doesn't wrap around floated contents by default. The easiest way to make it do so it with,
.div_container {
overflow: hidden;
}
So I'm using a responsive framework called skeleton which works great, however, with a section such as the header and footer, I want the background to span 100% width of the page which is now a popular design choice.
Does anyone have a workaround for this just to make a div pop outside of the container?
Assuming the container has the default position property (static), you could give the header a position:absolute. Then set top:0, left:0 and right:0.
Make sure to set the top margin or padding of the container to the same height defined for the header.
This will not work if the container has been given a position value of relative, absolute, or fixed.
skeleton.css line 301:
.container:after {
clear: both;
content: " ";
display: block;
height: 0;
visibility: hidden;
}
This declaration will make sure that any content displayed after the container is not visible, therefore not disrupting the grid in any way on the page.
The container is also set to 960px wide and position:relative (skeleton.css line 24)which means that you can't create anything inside the container div that can be set to page width without using javascript ( + jquery for simplicity ). On such a key design feature on most sites it wouldnt be such a great idea to rely on this.
I would try removing the :after declaration on .container and then add a new <div> underneath with width:100%; height:128px; and see how it affects your grid as a starting point.
Try this:
body {
font-family: 'Open Sans',sans-serif;
font-size: 0.875em;
overflow-x: hidden;
}
.header-container {
background-color: #CCCCCC;
float: left;
height: 100px;
margin-left: -400px;
overflow: hidden;
padding-right: 800px;
width: 100%;
}
#header {
margin-left: 409px;
margin-top: 10px;
text-align: center;
}
I am getting 12px white space at the bottom of my pages. Upon inspecting the CSS it's not attributed to any element. According to CSS inspectors the height of both the body and html elements don't include this space...It's got me miffed.
The page is here if you want to take a look: Page
Thanks
Change the content of your .clearfix from a . to \0020 (which is a space). This will do the trick:
.clearfix:after {
clear: both;
content: "\0020"; /* change to this */
display: block;
height: 0;
visibility: hidden;
}
If you change the #footer-wrapper to this it will fix your problem
#footer-wrapper {
background-image: url('../images/green.jpg');
height: auto;
overflow: hidden;
}
I hope this helps.
part of it is related to your .clearfix::after. I added a line-height:0 to that, and most of it went away. I think your line-heights generally across the page are screwing with the layout a bit.
If you don't want to change line-height or something, you can just add padding to your footer like this:
#footer-wrapper {
margin-top: 35px;
padding-bottom: 20px;
}