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.
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 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 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 8 years ago.
Improve this question
I have a problem with my school project. I want to make two columns on my page using css, but nothing is working...
Website : http://kitlab.pef.czu.cz/~wbdinfo141528/
CSS : http://kitlab.pef.czu.cz/~wbdinfo141528/css/style.css
I hope that there is some dumb mistake, but I can't figure out, where the problem is.
I want to place the right column next to the left one :
Your margin was taking up the entire row, that's why the second div was pushed down. You don't need margin, just set the width and display it as an inline-block. The inline-block means it'll still be a block, but will wrap like text - so if there's enough space for the second div to be in the same row as the first, it can be.
Replace CSS with this, comments for what was changed.
div.leva {
background: blueviolet;
/* float: left; */
/* margin: 5px 500px auto auto; */
width: 49%;
display: inline-block;
}
div.prava {
background: yellow;
/* float: left; */
/* margin: 5px auto auto 500px; */
display: inline-block;
width: 49%;
}
Alternatively, you can use a relative container div and set that to 100%, and have two absolute divs inside the container with 50% width.
HTML
<div class="container">
<div class="leftdiv"></div>
<div class="rightdiv"></div>
</div>
CSS
.container {
position: relative;
width: 100%;
}
.leftdiv, .rightdiv {
position: absolute;
width: 50%;
top: 0;
}
.leftdiv {
left: 0;
}
.rightdiv {
right: 0;
}
You must add margin:0 in div leva et prava http://jsfiddle.net/rvp5js2w/
At first glance your floats are incorrect.
The purple is floated right while the yellow is floated left.
Set a width (where width is less then total width of stranka/2) for each of these div's and then float them correctly and it should line up.
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.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I need to set the height of my webpage constant in any screen size.Is it possible.Please help.
My content is in a wrap div
<div id="wrap"></div>
Thanks
Well, what is that constant? More details would be helpful. But, have you tried setting the height?--for example.
html, body {
height: 200px;
}
#wrap {
height: 200px;
}
You can also try with positioning. This does not require you set the height of html and body as the first example does.
#wrap {
bottom: 0; /* change this */
left: 0;
position: absolute;
right: 0;
top: 0; /* and this to fit your requirements */
}
It is very possible to do what you want.
The problem that most developers encounter when trying to do this is that when setting the height of a div to 100% it actually flattens to 0px. This is because 100% of nothing is nothing.
Since the body and html tags are both parent of your div they need to be adjusted first.
What you need to do on your css:
html,body{
height: 100%;
width: 100%;
overflow: hidden;
}
#wrap{
height: 100%;
width: 100%;
overflow: auto;
}
its not possible to maintain constant height in different screen sizes
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.