My Problem is that I have fixed div at the bottom on my page with disclaimer and so on.
This DIV is overlapping the vertical scrollbar so I have deleted the overflow from the parent element.
Now that is working but I need the overflow for the parent element to see the further content when scrolling the page.
Can someone help me?
Look at this:
jsfiddle
#scrollable
{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
margin:0;
padding:0;
}
div.bottom
{
background-color: #fa0000;
position: fixed;
bottom: 0%;
/*height: 10%;*/
height: 80px;
width: 100%;
margin:0;
padding:0;
z-index:9999;
}
div.test
{
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
position: absolute;
top : 10px;
background: #000000;
height: 1500px;
width: 100%;
margin-bottom: 80px;
margin:0;
padding:0;
}
You have to set the height of your container. The height should be such that it will just be enough for the disclaimer div to be visible. Then give the overflow:auto to the container. This will take care of scrolling and overlapping.
THe height can be calculated depending on the DOM structure of your page. But Please give proper height.
The concept of overflow is really simple, when your content "oveflows" a scrollbar appears if u have given overflow attribute. In your case, the overflow is occuring , but since the available height is more, it is going beyond your disclaimer div. Just make it less so that your disclaimer div and container div do not overlap. And you should be fine
If you had posted the code and page structure, it would have been simpler to explain.
Related
I have a header section along the top of my site which I want to stay fixed when people scroll down the page. The background of the header is black against a plain white background.
After adding in the position:fixed; rule it seems to add a margin of about 16px between the top of the page.
#container-id-01 {
height: 100px;
width: 100%;
background-color: #000;
margin-top: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
position: fixed;
}
I've tried changing the margin to float:left; but it still doesn't make any difference. The width: 100%; needs to be a percentage to fill the full width of the page.
Is there anyway to get rid of the margin?
Adding !important didn't work, and the body was already set to padding:0;
I took advice from a commenter and top:0; did the trick
:)
May be some style is overriding your current css make sure no other css is there for that element or you can do.
#container-id-01 {
height: 100px;
width: 100%;
background-color: #000;
margin-top: 0px!important;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px!important;
position: fixed;
}
this will override all other styles..
Try this, it might be the default body padding.
body{padding: 0px;}
So i have nested divs in chrome
<div id="wrapper">
<div id="content">
</div>
</div>
The wrapper div is just a bordered container in the shape of a box. On safari/firefox the content resides inside of the box and 50% of chrome the content div resides in the box however the other 50% of the time it is outside of the box. I don't really know what to do as it works in Safari and firefox and for some reason is a toss up in chrome. Could it just my computer? Has anyone experienced this problem?
Thanks
#wrapper{
display: block;
position: absolute;
top: 5%;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 90%;
background-color: #efefef;
}
#content{
height:78px;
width:100%;
border-bottom:solid 1px gray;
font-weight:1000;
margin-left:0px !important;
background-color:white;
}
Have you tried box-sizing: border-box; on the #wrapper?
When you use position: absolute; it removes the element from the natural element flow on the page. If you're able to, you should remove the absolute position.
Keep in mind that if you want to use height percentages, you will need to define the top level element to be 100%.
body,html {
width: 100%;
height: 100%;
}
Body and HTML will inherit from Window. Then all other elements on the page will inherit from body or html.
Here's the full:
body, html {
width: 100%;
height: 100%;
}
#wrapper{
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 90%;
background-color: #efefef;
}
#content{
height:78px;
width:100%;
border-bottom:solid 1px gray;
font-weight:1000;
margin-left:0px !important;
background-color:white;
}
http://jsfiddle.net/twqxoc0j/
The trade-off, and most important thing to remember, about absolute
positioning is that these elements are removed from the flow of
elements on the page. An element with this type of positioning is not
affected by other elements and it doesn't affect other elements. This
is a serious thing to consider every time you use absolute
positioning. It's overuse or improper use can limit the flexibility of
your site.
From: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
I have this container which can scroll the content. I would like the header in this container to always stay in the top.
http://jsfiddle.net/z9ze5/
Container:
.lists {
width: 300px;
height: 250px;
margin: 30px auto;
background: #39C;
overflow: scroll;
position: relative;
}
Header:
.box_header {
width: 100%;
height:30px;
overflow:hidden;
position: absolute;
margin: 0;
background: #DDD;
z-index: 999;
}
If you are willing to alter your mark-up, here is one way of doing it:
<div class="lists">
<header class="box_header">
<h1>HEADER 2</h1>
<div class="setting" id="btn2"></div>
</header>
<section class="content">
<p>Lorem Ipsum ....</p>
</section>
</div>
Wrap your scroll area in a <section> (or other block level element).
For your CSS:
.lists {
width: 300px;
height: 250px;
margin: 30px auto;
background: #39C;
position: relative;
}
section.content {
width: 300px;
height: 220px;
margin: 0 auto;
background: #39C;
position: relative;
top: 30px;
overflow: scroll;
}
Please see fiddle: http://jsfiddle.net/audetwebdesign/nGGXx/
More Advanced Example
If you study the following example:
http://jsfiddle.net/audetwebdesign/fBNTP/
uou can see how your scrolling boxes could be applied in a semi-flexible layout.
I lined up two scrolling boxes side by side and made their width proportionate to the width of the page.
The height is trickier to adjust. I fixed the height of the parent container, see the following rule:
.contentWrapper {
border: 1px solid red;
margin-top: 1.00em;
padding: 30px 0;
overflow: auto;
height: 400px;
}
If you change the height from 400px to some other value, the scrolling boxes will adjust themselves.
Hopefully, these examples will give you and others some more insights into how to build these more advanced layout designs.
If you want a non-css fix, add this listener...
$('.lists').scroll(function() {
$('.box_header', this).css('top', $(this).scrollTop()+'px');
});
and then change .lists css to give relative positioning
.box_header {
width: 100%;
height:30px;
overflow:hidden;
position: relative;
margin: 0;
background: #DDD;
z-index: 999;
}
Any position absolute within a position relative is absolute to the relative container. In order to have a header that stays in position, you'd need to position it above, not within, the scrolling container.
look at adding position: fixed to your header div .box_header. You may have to add padding of the height of the box header div to section.content but as you have that set to 30px that should be fine. IE6 and lower has issues with fixed positioning but hopefully we can live with that now - less people are using that than are still listening to Moby.
Click here for visual
As you can see from the picture, my parent container is not expanding to fit my child container. The page container (#contain) actually stops at the bottom left hand corner of the kitchen photograph. The child container (#zone2) is clearly overflowing outside its parent container (#contain). I would like to be able to have (#contain) expand automatically to fit (#zone2). The CSS is:
#contain {
position: relative;
width: 100%;
margin: 0 px;
background: #E3DCCC;
z-index: 0;
}
#zone1 {
width: 100%;
height: 850px;
background: url(http://waly1039.com/sites/default/files/k4.jpg) no-repeat center top;
position: absolute;
z-index: -1;
}
#head {
position: absolute;
top: 20px;
width: 100%;
height: 330px;
}
#head img {
max-width: auto;
height: auto;
}
#zone2 {
position: relative;
overflow: hidden;
padding: 3px;
top: 360px;
float: right;
right: 15px;
width: 53%;
height: auto;
border: 4px solid #715E40;
background-color: white;
}
#zone2 img {
max-width:100%;
height: auto;
float:left;
margin: 5px;
}
#zone3 {
position: relative;
top: 710px;
left: 15px;
float: left;
height: 340px;
width: 38%;
border: 4px solid #715E40;
background-color: white;
}
This is a float issue. Try adding the traditional CSS clear fix to #zone2's container:
.container:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Be sure to put this in the :after pseudo selector, otherwise it won't work for you. Floated elements exist outside of normal document flow, which is why the container isn't expanding to contain them. The clear fix forces the floats to be cleared, which will cause the container to expand around the bottom of this element.
I tested adding more images to #zone2 and #contain expands vertically. Somehow you've got an element(s) in #zone2 with padding or margins that aren't being added to the parent's total height.
If you want a quick fix in order to move on then add margin-bottom: 30px; to #zone2.
I've duplicated your problem and was able to resolve it with this: You might want to try it. It's looks a bit odd so make a class for it if you like. I'm more concern with where it is placed.
Just beneath lines of your code, add my third line. Just that and you are done. Note, it more about positioning.
<div id="zone3"></div>
<div id="zoneclear"></div>
<br style="clear:both; float:none; display:block; height:1px;" />
Just add the third line.
and just modify one of your styles:
#zoneclear {
clear: both;
float:none;
display:block;
height: 30px;
position: relative;
}
[EDIT]
The codes have a serious bug in firefox which is not present in Google Chrome (that I tested in earlier due to your relative positioning. So I've modified the #zoneclear style to fix that. You might have to test if the other browsers like this hack.
I hope it helps you
I try to center a div element ( the footer div in this case ) in my webpage but it insists on staying on the left side.
I am not quite sure what is wrong... Any ideas?
Thank you in advance.
HTML :
<div id='main'>
</div>
<div id='footer'>Centered Text</div>
CSS :
* {
padding: 0;
margin: 0;
font-size: 12px;
}
body {
font-family: helvetica, serif;
font-size: 12px;
overflow-y:scroll;
}
#main {
border: 1px solid #bbbbbb;
margin: 3% 5%;
padding: 10px 10px;
}
#footer {
font-size: 75%;
margin: 0px auto;
position: absolute;
bottom: 0px;
}
http://jsfiddle.net/DjPjj/2/
http://jsfiddle.net/DjPjj/13/
Try this:
#footer {
font-size: 75%;
width: 100%;
position: absolute;
bottom: 0px;
text-align: center;
}
Because your footer is absolutely positioned, you must tell it what width to take relative to its parent container. You can then use text-align to center the text within it.
Here is another example: http://jsfiddle.net/DjPjj/17/
This one centers a box within the absolutely positioned element. The inner box can be centered using margin: 0 auto because it is not absolutely positioned.
#footer {
font-size: 75%;
width: 100%;
position: absolute;
bottom: 0px;
}
#footerInner {
margin: 0 auto;
width: 300px;
background-color: #ddd;
text-align: center;
}
This is more flexible because the inner element gives you a new container to work with that is centered relative to the parent.
The reason it won't center is because of the positon: absolute;.
Keep in mind this means that the footer will always be at the bottom of the page, even if the content overflows past it. It will overlap. If you want to have it be attached to the bottom of the page, you must set the min-height of a container above it to 100% and then deal with a negative margin-top and remove the position: abosolute;
http://jsfiddle.net/4fuk7/1/
Notice how the centered text is overwritten.
If you are looking for something to always be at the bottom, this would work
http://jsfiddle.net/4fuk7/3/
Sorry, the last one would scroll to the top. This one doesn't, but you'd need to fiddle with it a bit to get it to properly align around the margin's you've set. http://jsfiddle.net/4fuk7/9/
http://www.tlunter.com/Layout 2/ is where I did something similar. You can reference that if you want.