I have a problem with two divs that have position: fixed.
If you look at the header, the scrollbar is in the back and the header is on top of the scrollbar. How can I fix this?
HTML:
<div class="BG1">
<div class="Data"></div>
</div>
<div class="BG2">
<div id="Header">
<div class="Header_Data"></div>
</div>
<br />a<br /><br />a<br /><br />
</div>
Code: http://jsfiddle.net/Z6Pwg/
I simplified your example: http://jsfiddle.net/uVjft/
So actually you have on position: fixed block inside another. And the scrollbar corresponds to BG2 block NOT the window scrollbar which actually cannot be overlapped.
To fix this try to remove position: fixedfrom BG2 div: http://jsfiddle.net/Z6Pwg/1/
just include the code
.BG2 #Header .Header_Data {
width: 100%;
height: 120px;
overflow: hidden;
background-color:#eee;
}
in your css it will fix your issue, and if u want a fixed header don't use transparent background
Thanks
Related
I know that you can position an element fixed to the bottom using the following css code:
position: fixed;
bottom: 0;
left: 0;
The problem is that the bottom content on small devices overrides the content that is above it. Does anybody know if bootstrap provides a responsive solution for this issue?
You could always use !important. However you should probably be using a sticky footer. You need put the padding to the height of your footer on your body > .container. see here http://getbootstrap.com/examples/sticky-footer-navbar/.
.force-to-bottom {
position:absolute;
bottom: 5%;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/latest/journal/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row force-to-bottom text-center">
<div class="col-xs-12">
<h1>
<button class="btn btn-primary" type="button">Save</button>
</h1>
</div>
</div>
</div>
Credits: https://stackoverflow.com/a/19072741/5192105
If I understood the problem correctly, you can resolve it by giving your body a margin-bottom to resolve this issue.
Suppose you have a fixed div that has a height of 200px.
Use:
body {
margin-bottom: 200px;
}
I've got one wrapping div and two divs with different height inside them. How can I make sure that the wrapping div is always at least the height of the bigger div inside it because for some reason I see that when in the .leftMenu div there is a lot of info (both divs are dynamically filled with info) - the wrapping div stays as the height of .centerBody! (I've put on purpose the styles of divs inline so its quicker)
My code:
<div id="importPartUpdate">
<div class="leftMenu" style="position: relative;margin-top: 10px;width: 15%;clear: both;display: inline-lock;float: left;" />
<div class="centerBody" style="margin-top: 10px;margin-left: 0px; display: inline-block; position: reative;width: 83%;padding: 5px;"/>
</div>
Clear your div floats using clear:both CSS property.
<div id="importPartUpdate">
<div class="leftMenu" style="position: relative;margin-top: 10px;width: 15%;clear: both;display: inline-lock;float: left;" />
<div class="centerBody" style="margin-top: 10px;margin-left: 0px; display: inline-block; position: reative;width: 83%;padding: 5px;"/>
<div style="clear:both"></div>
</div>
FIDDLE DEMO
You can use display:flex;. Check this link: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here's the working fiddle: http://jsfiddle.net/NhKb6/2/
Below I have some HTML code. Everything is positioned relative apart from contentRow which is positioned absolutely. This is making the footer stick to where the browser window ends and not where the scroll bar ends.
Is there any way I can make the footer go down to the very bottom where the scroll bar ends.
<div id="s4-workspace" style="width: 1920px; height: 748px; overflow:scroll">
<div id="s4-bodyContainer" style="position:relative">
<div class="headerSection" style="position:relative">
<div class="globalHeader">
</div>
</div>
<div>
<div id="contentRow" style="position:relative">
<div class="fixedWidthMain" style="position:relative">
<div class="fixedWidthMain" style="position:absolute">
</div>
</div>
</div>
</div>
</div>
<!--PAGE FOOTER SECTION-->
<div class="pageFooterSection" style="clear: both;position:relative">
</div>
</div>
Theres a few available flavours of the solution for this but they basically go something like this.
EXAMPLE
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
a point to remember is that height of elements in html are always passed through the parent. so if you dont define height 100% on a parent the child won't know either. Good luck and let me know if you have any other issues :)
SOURCE
http://mystrd.at/modern-clean-css-sticky-footer/
If I'm understanding correctly, you could make s4-bodyContainer position:relative so that the contentRow is only positioned absolutely within that container. Then footer would go below the bodyContainer.
I am having an issue with my webpage.
My div tags on the right side are overlapping onto my center column... I have set a min-width to my parent div tag but it did nothing to help elevate the problem.
Plus my navigation bar is giving me a little issue.. ENGAGEMENT will fall under the ABOUT tab when I re-size my web page. I have display: block; and display: inline; set in my CSS. It works fine just the re-sizing is hurting my web-page..
My layout is basic..
<body>
<div style="width:100%; margin-top: -18px; clear: both;">
<div style="width: 100%; height: 100px; background-color: white;">
<p style="padding-top: 3%;font-size:30px; font"><i>Welcome</i></p>
</div>
<div style="width: 100%; display: block; overflow: hidden; ">
<div><li>About</li></div>
<div><li>Books</li></div>
<div><li>Electronics</li></div>
<div><li>Apparel</li></div>
<div><li>Activities</li></div>
<div><li>Engagement</li></div>
</div>
<div style="float: left; background-color: white; margin-left: 80px;">
</div>
<div id="left-col" style="clear: left;">
</div>
<div id="central-col">
</div>
<div id="right-col" style="text-align: center; clear: right; ">
</div>
<div id="footer"><p style="text-align: center;">KNOWLEDGE IS POWER</p> </div>
</div>
</body>
It would be better if you have given full code (may be on jsfiddle) because it is hard to understand what these divs are doing by looking at your code. (You have made so many of them.)
For your solution, I think you have to remove
width: 100%
from second and third div.
You have set margin-left to 80px, so whenever you resize the window, it will always have a margin of 80px from left.
Also I want to know the use of
overflow: hidden;
in your code.
http://tinypic.com/r/9km2v8/5
In the image, you see the floating box. The top left corner of the box (0,0) is aligned with the top of the parent div which is line 3.
I am trying to get the bottom left corner of the floating box to align with the middle of the parent div.
I am using CSS:
.video_desc_box_open {
position: absolute;
left: 500px;
width: 301px;
}
bottom: 0; does not work. It pushes it down very far on the page.
I am open to JS solutions too :)
Thanks!
EDIT: Almost forgot, the height is dynamic.
HTML:
<div class="video_odd">
<div class="video_list_viewed" >
<img src="viewed_no_odd.jpg" />
</div>
<div class="video_list_number">
3
</div>
<div class="video_list_title">
<a id="show-panel" class="show-panel" href="#">Title to vid</a>
</div>
<div class="video_list_desc">
Text goes here
</div>
<div class="video_desc_box">
<img src="desc_box_top.png" />
<div class="video_desc_box_text">
Text for the desc goes here
Run Time:1:21
<br>
Desc goes here
</div>
<img src="desc_box_bottom.png" />
</div>
<div class="video_list_post_date">
02/01/2011
</div>
<div class="video_list_run_time">
1:21
</div>
</div>
I think I kinda understand your question, try this:
#parent_div {
position:relative
}
.video_desc_box_open {
position: absolute;
top:-50%
left: 500px;
width: 301px;
}
if you could provide live code it will be easier to help :)
Add position:relative; to the box's parent then align using bottom.