I've set jQuery's accordion ui widget to fill space and resize on demand. Whenever the resize takes place, the accordion cuts through the page footer, which I've 'fixed' to the bottom of the page. I've also tried setting the footer to: #footer {position: absolute; bottom: 0; } but on resize the footer moves nearly to the middle of the page. Does anyone have any ideas/suggestions on how I can handle the resize so the newly sized accordion does NOT pass through the footer?
Try make a container and set its CSS to
overflow:auto;
Or try set the container to:
display: table;
and the #footer:
display: table-row;
Add the following CSS in the same div. (which is resizable).
overflow:auto;
Related
I have what seemed like a simple issue but cant quite figure this one out. I am using bootstrap version 3 to create my base layout. I have a footer that needed to be at the bottom of the page so i made it position: absolute; bottom: 0; and worked fine if I zoom out. When the content start getting lengthy it creates the vertical scroll bar and when scrolling the DIV floats around instead of staying at the bottom.
I tried giving the container a position: relative; but dosent seem to do anything. Would anyone have any ideas?
Heres an example of my layout, if you resize the preview section to force the vertical scroll bar you will see that when you scroll the DIV floats around instead of staying in place.
https://jsfiddle.net/DTcHh/10301/
try with fixed
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
js fiddle example
non-fixed, see the below:
your problem is (from what I gather) the footer is floating dependent on the content and and you want it to stay put where you call it.
.footerElement {
// base styles all styles
display: inline-block; // add this, does as you imagine
}
"Displays an element as an inline-level block container. The inside of
this block is formatted as block-level box, and the element itself is
formatted as an inline-level box" -W3schools
scrollbar, see the below:
As for the element that has a scrollbar resolving.
.elementwithScrollbar {
// base styles all styles
overflow:hidden; // or use overflow-y:hidden; or x
}
fixed, see the below:
If you want it to be fixed; adding position: fixed; and the value coordinates should all you have to do there. (ie. position:fixed; and where you want it)
"Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page." -MDN
Using fixed only anchors it to the bottom of the screen regardless of which part of the page you are viewing. I think you want to have the footer at the bottom of the page rather than constantly sitting at the bottom of the screen.
To fix, amend your spelling mistake here:
.contrainer-fluid { <-- should be container
position: relative;
}
I'm trying to lay one div over another. This is really simple if you know the dimensions of the div.
Solved here:
How to overlay one div over another div
So, here is my HTML:
<div class="container">
<div class="overlay"></div>
<div class="content"></div>
</div>
In my case, I don't know the exact dimensions of the "content" or "container" div. This is because I don't have control over any of the content in the div (we are making our app extensible for 3rd party developers).
See my example on jsFiddle
The overlay should cover the content entirely. Width 100% and Height 100%. However, this does not work because in my example I positioned the overlay absolutely.
One solution is to use JavaScript to get the size of the content div and then set the size of the overlay. I don't like this solution much since if image sizes are not specified, you need to wait until images are loaded and recalculate the size of the div.
Is there any way of solving this problem in CSS?
You could set the position to absolute and then set all 4 positioning values to 0px which will make the box expand. See a demo here: http://jsfiddle.net/6g6dy/
This way you dont have to worry about recalculating things if you want padding on the overlay or the container (like you would if you used actual height and width values), because its always going to be adjusted to the outer dimensions of the box.
It's not possible to do this because:
The overlay is not contained by anything to restrict it's size (since there is no height/width applied to the container).
The size of the content div can change as content loads (since it has no fixed width/height).
I solved this by using JavaScript*. Eg.
function resizeOverlay() {
$('.overlay').css({
width: $('.content').width()
height: $('.content').height()
});
}
$('.content').find('img').on('load', resizeOverlay);
*Code not tested.
Hey are you looking like this : http://tinkerbin.com/Vc4RkGgQ
CSS
.container {
position:relative;
background:blue;
color:white;
}
.content {
position:absolute;
top:0;
left:15px;
background:red;
color:yellow;
}
I do not know what you are exactly trying to do but this might work:
container must be relative: anything from static
overlay and content are absolute :move top/left in first non static parent; no flow.
Give same top/left to be on top and higher z-index for upper element.
See this demo: http://jsfiddle.net/rathoreahsan/kEsbx/
Are you trying to do as mentioned in above Demo?
CSS:
#container {
position: relative;
}
.overlay,
.content{
display:block;
position: absolute;
top: 0;
left: 0;
}
.overlay{
z-index: 10;
background: #ccc;
}
You can indeed do this without JavaScript. Your problem is that #container element has 100% width relative to the whole page. To fix this you can:
a) position it absolutely,
#container {
position: absolute;
}
b) make it float or
#container {
float: left;
}
c) make it display as table cell
#container {
display: table-cell;
}
One of the above is enough, you don't need to apply all. Also you should not position .content absolutely as this will prevent #container to have the same width/height.
If you are worried about images loading after the height is set you can go ahead and set the dimensions of the image in the containing div and use the padding-bottom hack. This way when the browsers paints over the page it knows how big the image will be before it loads.
I have a fixed position div on the right side of an HTML page I am building. This div is meant to be sticky as the page is scrolled. The problem is that on smaller screens some of the content is hidden because it does not entirely fit on the page (example: http://jsfiddle.net/uJN4Q/).
I attempted to fix this problem by putting the content in a div inside the container div, setting the container div to have a bottom value, setting the inner div to 100% the height of the container div, and setting overflow: auto on the inner div. The problem with this solution is that on bigger screens there is then large amounts of ugly whitespace at the bottom of the inner div.
Any ideas how to make it so that the entirety of the text can be seen, the div is still position: fixed, and the bottom of the div 'sticks' to the last line of text so there is no whitespace at the bottom of the div?
How about a CSS #media query?
#media (max-width: 600px) {
#sticky_part {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 35px;
}
}
When the document is small enough, this sticky part will shoot to the top so it doesn't interrupt the other content on your site. My microblog, http://jscal.es, uses this technique.
I think you should use CSS Media queries to detect device width & height apply css to that div accordingly.
#media screen and (min-width: 960px) {
div{position:absolute;/*Or whatever u want*/
}
OR
You can use Javascript to detect device with
Here is the link to do this using css & javascript:
http://css-tricks.com/resolution-specific-stylesheets/
I have a position:fixed; navigation bar. Whenever I go to mypage.html#myid, the navigation bar overlaps some of the content of myid. How can I move the entire page down a bit so that the navigation bar isn't covering the content?
P.S. I tried body{padding-top:50px;}
You can't use margin-top on the myid div? Your main content should be inside a div and this div should be inside the body then myid div can push down from the body to allow enough space for the fixed nav bar.
Some code would help...
There is a bit hacky solution needed.
#myID:before {
display: block;
content: " ";
margin-top: -285px; /* navigation height */
height: 285px; /* navigation height */
visibility: hidden;
}
The logic is to add hidden element before the #myID content so browser will give it a hidden space. Giving minus valie as margin-top will prevent it to give phsyical space.
Please have a look at here for detail: http://css-tricks.com/hash-tag-links-padding/
i'm new to webdesign and i have a little problem. I have a header(at the top), a navigation(at the left) and then the main content. I have set my header and navigation to position: abosulute so it won't scroll with the page. Now I wanna make it that the maincontent doesn't go over the header when you scroll. How can i do this?
image of the site
Here is the fiddle to get the desired layout... Header and sidebar position: absolute;
Fiddle: http://jsfiddle.net/FTtzc/1/
Demo: http://jsfiddle.net/FTtzc/1/embedded/result/
Put the main content in a container of its own and give that container a scrollbar.
Give your Header a Backgroundcolor and z-index: 2; and your content gets z-index: 1;
for further reference on z-index http://www.w3schools.com/cssref/pr_pos_z-index.asp
You can put your content in another absolutely positioned div, and then allow it to have a scrollbar with overflow: auto (scrollbar hidden when not necesssary) or overflow: scroll (scrollbar always visible).
Here is a fiddle to demonstrate: http://jsfiddle.net/YYmA9/1/