Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have an issue with my webpage. The issue is that the content go under the footer.
See my issue here
http://www.webdevout.net/test?0138
The container is
height:100%
position:relative
while the footer is absolute and bottom:0;
I thought footer was made this way, what am I missing? I need the footer to have 50px(may be) distance from the content always.
You don't need absolute position in that case, because you just want to follow the correct page flow ; absolute position doesn't take other elements in account, so it is logical that your footer is hover your content.
Simply remove absolute position and add some margins. ;)
If you remove the position absolute from the footer you'll be fine, then place a margin-top of 50px;
div.footer {
height: 70px;
width: 100%;
padding: 10px;
padding-left: 20px;
background: #F2F2F2;
border-top: 1px solid #ccc;
clear: both;
margin-top: 50px;
}
Since the .footer has position absolute, it wont "push" the html-content further down.
If you add
padding-bottom: 40px;
to
div.main{
It will look allright.
This makes .main bigger
div.main {
width:800px;
min-height:400px;
margin-top:40px;
padding-bottom: 40px;
padding-left:20px;
}
After checking with Firebug, I found that removing "position:absolute" from div.footer class in your CSS, solves the problem.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Sorry if this is a duplicate, but I've been looking around for the last hour and can't find any solutions that work.
I have three divs that I need to line up left to right for my footer, but the content inside the divs needs to remain top to bottom. Here's a picture of the mockup that I made:
I've tried inline-block, i've tried block, I've tried float, I've tried them all together, and a host of other stuff and I can't figure it out. They still line up top to bottom. Any help would be appreciated, here's a fiddle with all the code for the footer.
https://jsfiddle.net/kLbtfqp6/
Change your css to this:
.footer {
background-color: #5c0e13;
color: white;
display: inline-block;
width: 100%;
}
.favicon {
display: block;
}
.footernav, .socialmedia {
width:50%;
float: left;
}
.footer img {
width: 10%;
display:inline-block;
}
.footer p {
width: 50%;
display:inline-block;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
So I’m trying to redesign my website to keep the header at the top of the screen and let the rest of the page scroll beneath it. I did some research and found a nice JSfiddle that explained what I needed to do: http://jsfiddle.net/austinbv/2KTFG
#header {
position: fixed;
top: 0px;
height: 20px;
width: 100%;
background: green;
}
#body{ margin-top: 30px; height: 3000px; overflow: auto; }
<div id='header'>hello</div>
<div id='body'>skdfl</div>
I added the 2 DIVs to a Dreamweaver template and then the CSS. I then broke my page up into 2 portions and placed each in the corresponding DIV. Now when I view the page in the browser, the bottom div refuses to extend far enough to show the contents within. it stops at the bottom of the screen, not the bottom of the contents. See the example at http://www.rcda.org:81/index2.html
I researched the net and found people saying that the contents of the DIV are somehow floated and above the div causing the div to not expand. I did not float the contents.
What can I do to get body div to expand to the height of its contents?
On your div#body (random div..), you have overflow:hidden- with a fixed height, this is hiding anything below the fixed height.
Take off overflow: hidden; on the body css in index2.html
#body {
margin-left: auto;
margin-right: auto;
margin-top: 203px;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
How to place the Scroll button to the bottom of the first page?
Using bootstrap code and not using extra CSS.
Example site
This is what I mean:
you can use position fixed? that would keep it at the bottom of the page
button{
position:fixed;
bottom:20px;
}
https://jsfiddle.net/Lf5o705a/
or position absolute would keep it at the bottom of the first section
button{
position:absolute;
bottom:20px;
}
https://jsfiddle.net/Lf5o705a/1/
I don't think bootstrap has anything built-in for this.
If you want to write some css, consider the following example:
HTML:
<div class="outside">
<div class="inside"></div>
</div>
CSS:
.outside {
height: 300px;
background-color: #eee;
position: relative; /* This allows you to position something absolutely within this element. */
}
.inside {
height: 50px;
width: 100px;
background-color: #ccc;
display: inline-block;
position: absolute; /* This allows you to specify the position within the parent element */
bottom: 10px; /* will be located 10px from the bottom of 'outside' */
/* This is a method for centering an absolutely positioned element */
left: 50%;
margin-left: -50px; /* Half of the width, so that it can be centered
}
Example fiddle
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to createa a div, who has some links, and a logo image. The thing is that I don't want that the div to resize to the image size. I want that the image ovelap the div. I want something like the image. But when I add the image inside the div, the div size is increased to contain the image.
What you are saying is that you want to remove the image from normal flow. There are several ways to do that:
Float
img {
float: left;
margin: <position it with this>;
}
Floating is handy because it will remove the element from normal flow, while still giving you the option of clearing the float. It will also push the float: right navigation away when near. The only downside is that it's not as powerful as absolute.
Absolute
#nav {
position: relative; /* child positioned in relation to the first element with non-static position */
}
img {
position: absolute;
z-index: 1;
left: <position it with this>;
top: <position it with this>;
}
Absolute completely removes the element from flow, so it won't interfere with anything, including the right navigation (this could be a downside). You can position it accurately with left and top.
Negative Margin
img {
margin-bottom: <some negative number>;
}
This will pull the bottom of the container up, making it look like it's out of normal flow, without the consequences of that. I personally prefer this solution. It will work as long as you can calculate the correct margin-bottom for it to look right.
Plain, fixed height
#nav {
height: <some height>;
}
The simplest solution: just give your navigation a set height.
You can use absolute positioning:
HTML:
<div class="main">
<div class="image">Image Div</div>
</div>
CSS:
.main {
border: 1px solid green;
width: 50%;
height: 50px;
}
.image {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
border: 1px solid blue;
}
You can try it here.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
As per my knowledge, Absolute positioned element and floated element are removed from the normal flow of html (correct me if i am wrong).
Here's my jsFiddle
Here's my code:
<header> </header>
<div class="content-area">
<div class="left-sidebar"></div>
<div class="main-area"></div>
<div class="right-sidebar"></div>
</div>
<footer> </footer>
my css:
.content-area {
position: relative;
min-height: 310px;
background-color: #bbb;
}
.left-sidebar {
position:absolute;
float: left;
width: 50px;
height: 100%;
background-color: #abcdef;
}
.right-sidebar {
position: absolute;
right: 0;
width: 50px;
height: 100%;
background-color: #abcdef;
}
when i write anything inside my main-area why does the right-sidebar slides to down.
Add a top property to the side bar
.right-sidebar {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 100%;
background-color: #abcdef;
}
When position absolute is specified you are expected to position the element, meaning you must set its top, bottom, left and right properties to the values you desire. If one of these properties is not set the browser positions them, since they will be set to auto.
As they have told you, put top:0 to fix it.
Ok, the reason:
Check this link: http://dev.w3.org/csswg/css-position/#abs-non-replaced-height
The section you are looking for is the 2nd rule: (emphasis added by me)
If ‘top’ and ‘bottom’ are ‘auto’ and ‘height’ is not ‘auto’, then set
‘top’ to the static position, then solve for ‘bottom’.
And that is the reason. Remember, top defaults to auto not to 0.
Add top:0; to your right bar. It should not longer push down after that.