So i'm doing this project and i'm stuck with the footer. I am having this problem where the second section of the footer gets bigger and goes out of the footer. Another thing is when I do float:left; on the third section of the footer, footer's background goes away. So my question is, how do I contain everything within the footer. Here's the codepen - https://codepen.io/anon/pen/gxjbyg .
If I do this:
footer {
background: rgba(0,0,0,0.15);
clear: both;
position:absolute;
width:100%;
bottom:0;
}
It kinda gets fixed, but i'm wondering if there is another way, while not using the absolute positioning.
That's what you expect?
footer {
background: rgba(0,0,0,0.15);
clear: both;
display: table;
width: 100%;
}
You can use the clearfix css trick that is used for fixing the height of a parent container which has floating children elements. What you want to do in your code that you posted on codepen is make the #left, #center and #right elements float left and then apply the clearfix class to the footer element which is the parent of this three floating elements. Here is a sample code of how that would look like in code:
<html>
<head>
<style>
.clearfix:after{
content: "";
display: table;
clear: both;
}
#left, #center, #right{
float:left;
}
</style>
</head>
<body>
<footer class="clearfix">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</footer>
It appears to me that your problem is that you have #top and #bottom both set to a height of 50% with additional padding of 20px on each. If you look at your overlap, it's 40px.
To fix this, set your height to something like 45% and padding to 5%. That will probably achieve the behavior that you're looking for.
Related
I'm working with divs and I managed to make the wrapper center by having this css:
.wrapper{
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
width:1100px;
height:100%;
}
then I have this inside that is floated left. It went inside but my problem is when it gets longer, it pass the wrapper div. The wrapper div should also adjust when the height of the div inside adjust but it's not working. When I also float the wrapper, it also adjusts but it doesn't go to the center anymore.
.inside_div{
float:left;
margin:5px;
width:400px;
height:100%;
}
What I tried to do is to float the wrapper div and use:
margin-left:200px;
to adjust it and to make it look that it's in the center. But I based it on my laptop's screen. It may not be centered on different screens with different sizes.
What I wanted to see is that the wrapper div will be centered in all screens and it will also adjust when the div inside adjusts too. I just don't know how to do it.I tried dfferent ways but still same result.
This is the html part:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="header">
<div class="logo">
</div>
<div class="menu">
</div>
</div>
<div class="wrapper">
<div class="inside_div">
</div>
<div class="inside_div2">
</div>
</div>
<div class="footer">
</div>
</body>
</html>
The inside_div2 is floated right.
Floated objects won't expand their parents. Your initial css height value is all that the parent container has to reference for its height. By the way, height:100% is generally not going to work for you and is rarely something you should include.
Without seeing exactly what you're trying to do, this would probably work fine. Although it depends a bit what you have inside the 'inside_div':
.wrapper {
margin: 0 auto;
width: 1100px;
text-align: left;
}
.inside_div {
display: inline-block;
margin: 5px;
width: 400px;
}
I assume you wanted it off to the left since you were floating it left. But if you just want it centered, you can either just remove your float value and use margin: 0 auto; or use the css above and change text-align to center.
EDIT: Ok, so had to recheck your stuff above. I think what you want is simply this:
.wrapper {
width: 1100px;
margin: 0 auto;
}
.inside_div {
width: 400px;
margin: 0 auto;
}
That'll center both of them, regardless of the size of the screen. You can add a height value to the inside_div if you need, but px values would be best, and if you have content in there is usually best just to let the content dictate the height without explicitly setting it.
Remove all height properties and add a "clearfix" class to your wrapper.
In your css, define ".clearfix" as :
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
That should do the trick for modern browsers. You should definitely Google "clearfix" to learn more about it.
I'm trying to achieve, that the div's will behave like an example on picture, using css:
Is there any clean way to do this? I achieve this using javascript to calculate "left" div height and "main" div width and height. But i dont like this solution...is there any way to do this using css only?
Edit:
Page must not have scrollbar...so page's height is always max 100%, and no more...
thanks
If the sidebar (or any other div) is 100% height, and on top you have a 30px header, so that causes your container to be 100% + 30px height.
In the future you will have in css3 calc():
http://hacks.mozilla.org/2010/06/css3-calc/
This will solve your problem.
But for now you can add overflow: hidden; to the html and body section, but I recommend calculate the height of the sidebar ( container height - header height) using Javascript.
Check fiddle here
If you mean the two-column layout, you do it with pure CSS like this:
.container {
background-color: #aaaaaa;
}
.left {
float: left;
width: 100px;
clear: left;
}
.right {
margin-left: 100px;
background-color: #888888;
}
and HTML:
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
Live demo: jsFiddle
The div on top can be achieved without any special CSS. To place something below (a footer for example), you'll need to use clear: both.
Without any code it is hard to determine what you want. Here is a extremely simple version of what I believe you want.
HTML:
<div id="header">
</div>
<div id="side">
</div>
<div id="content">
</div>
CSS:
#header {
width:100%;
height:50px;
}
#side {
width:300px;
height:100%;
float:left;
}
#content {
width:660px;
height:100%;
float:left;
}
jsFiddle
I want my footer to take height same as the remaining bottom space. Currently I'm using following css for footer:
clear: both;
float: left;
background-color: #1F1102;
color: #E4F2FA;
min-height: 60px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
padding: 0;
padding-top: 10px;
text-align: left;
width: 100%;
min-width: 1000px;
margin: auto;
The result is:
Here as you can see the black has take only minimum height. I want it to take whole remaining space after it [that is marked with question marks]. Which changes do I have to make to get this?
note:- I don't want to give position:fixed to make it stick to bottom.
Well, the short answer is, You Can't!
The longer answer? You can fake it.
Why can't you?
Because a block level element is not able to strech and fill a space in height.
Fake it how?
Use the same background color as the footer for the container (or the same background image), that will cause it to appear like it's always fills up the entire space.
This is now possible with flexbox using a method similar to what is described here https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/. Do this, except put the flex-grow: 1 in the footer element instead of the content element (in the article it's listed as flex: 1).
You don't really can make a block-element span to the full height available in CSS. Best way is find use some workaround, which looks alike.
For example you may use a background-color (for the body/wrapper) or a centered background-image positioned to the bottom…
This worked like a charm for me (originally from how-to-keep-footer-at-bottom-of-page-with-css):
Put this in your css:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:10px;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
Then in your index/master/_layout/whatever:
<body>
<div id="wrapper">
<div id="header">
</div><!-- #header -->
<div id="content">
</div><!-- #content -->
<div id="footer">
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
I had the same type of problem. What worked for me was to add a few pixels of padding to the footer and it ended up taking up the bottom of the page.
This is what did it for me:
footer{
padding-bottom:10px;
}
Im not too great at CSS but hopefully someone on here can help. I have the following mockup. (i have stripped out my content to make it easy to view)
<body>
<div id="container">
<div id="header"></div>
<div id="body">
<div id="navBar"></div>
<div id="mainContent"></div>
</div>
<div id="footer"></div>
</div>
</body>
my CSS is as follows:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
now im unsure as to how to get the "navBar" to be the page height. I've tried adding height: 100% but that doesnt work.
Thanks,
Matt
Giving an element height: 100% will give it a height equal to that of its containing element, which in your case is #body. Since body in your example is only as big as it needs to be to hold its content, #navBar will be 100% of that height.
To fix this, you can make #container and #body height:100% to make them as tall as tho body tag, which takes up the whole page:
#container {
height:100%
}
#body{
height:100%;
}
In the interest of completeness, you could also set the top and bottom of #navBar:
position: absolute;
top: 20px;
bottom: 60px; /* height of footer */
To understand the difference, play around with This JS Fiddle. Mess around with the height and top, bottom, position properties to see how your changes affect the layout; just don't use both positioning methods at once!
Your issue appears to be that each parent DIV all the way up to the BODY tag must explicitely have a height of 100% for #navBar to have 100% height. This means you would also have to set the height of #body to 100% as well, since it is the parent container of #navBar.
Have a look at this site - I assume you want a two column layout - this site will show you how to do what you want. Hope it helps.
This is probably a very dummy question, don't throw your shoes at me :)
Consider having HTML like this:
<div class="container">
<div class="header">
</div>
<div class="body">
</div>
<div class="footer">
</div>
</div>
I want 'header' and 'footer' to be anchored to the parent's top and bottom respectively, and 'body' to grow easily to fit all available space.
What would the CSS look like to achieve this?
EDIT: Maybe I'm saying this wrong (i'm not exactly a web developer :) ), but what I need is to have some part of a div always attached to its bottom. So when div grows this part (which might have a fixed size) would go lower with the div's lower end. But all this doesn't mean attaching a div to the bottom of browser's window.
If I understand your question correctly, you require some really basic css.
body { background: black; }
.container { width: 960px; }
.header { height: 100px; background: #ddd; }
.content { padding: 10px; }
.footer { height: 100px; background: #ddd; }
Your div's are not floated, so will stack on top of each other like pancakes.
If you want the footer to be "sticky", see here for a solution...
http://ryanfait.com/sticky-footer/
Here you go:
Example page - footer sticks to bottom
this will have the content right
between the footer and the header.
no overlapping.
HTML
<header>HEADER</header>
<article>
<p>some content here (might be very long)</p>
</article>
<footer>FOOTER</footer>
CSS
html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
body:after{
content:'';
display:block;
height:100px; // compensate Footer's height
}
header{ height:50px; }
footer{
position:absolute;
bottom:0;
width:100%;
height:100px; // height of your Footer (unfortunately it must be defined)
}
Try this: Set position: relative on the parent div. Set position: absolute on the inner div(s) and set both the top and the bottom properties; don't set height. The inner div(s) should stretch vertically with the parent, as required. (Doesn't work in IE6 and below unfortunately).