Im trying to make my sidebar content follow the scrolling but stop at the footer. Currently, any content i place goes too far and overlaps the footer.
<div class="row row-no-padding">
<div class="col-lg-8">
Content is here.
</div>
<div class="col-lg-4">
Sidebar content would be here. I want all content here to follow my scrolling
but stop if if i go too far(stop at the footer).
</div>
</div>
Please help me with this. I know this is a minimalist example but i've tried so many combinations at this point that i dont know what the hell to write.
I've tried position:fixed but it makes the content overlap the footer. position:sticky doesnt do anything, or im not using it properly.
Related
I'm having trouble trying to figure out how to get the navigation on a site aligned properly. What I'm trying to do is have the navigation start at the left side of the page and stop at about 100px from the right side of the main content container div. The navigation is going to be in it's own container with no parent containers (unless someone has a solution that requires otherwise). At the end of the navigation I am going to put an image. The end result will look something like this:
My main problem is figure out how to set the widths and still be flexible for different screen resolutions. How would I go about doing this?
If you are going to put an image at the end and you want responsiveness, then you may want to consider to wrapper it in parent container.
<div class="parent">
<div class="leftside">
<div class="topmenu"></div>
<div class="botmenu"></div>
</div>
<div class="right-side">
<img src="image.png" />
</div>
</div>
See if this fiddle helps
I am working on converting a twitter bootstrap theme into a wordpress theme and adding onto it.
I am having issues adding full width items into the theme. I have tried adding a slider plugin that is set to full width. Although when it is added it goes to a fixed width, the same happens if I add an image aswell. It seems all of the content in my page does this except for my header and footer.
Also it seems every time I add in anything to the page the page/footer gets messed up. I am still learning css though.
I am posting a link to the site to see if anyone can take a look and give me a hand.
http://goo.gl/8JUDA
It looks like you contained the element that you want to stretch the size of the window within a .container div.
.container is used in bootstrap for fixed layouts. Instead try using the .container-fluid class.
For example:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
Read more: http://twitter.github.io/bootstrap/scaffolding.html#layouts
Here is a fresh variation on an old question.
I'm working on a page where the footer needs to be outside the main wrapper.
<body>
<div id="page-wrap"></div>
<footer id="footer"></footer>
</body>
I've been looking for a nice cross browser solution for implementing a footer which sticks to the bottom of the content in the page-wrap or the bottom of the page when the content in the page-wrap doesn't quite fill the page. I searched stackoverflow & a few other places. I have yet to see a solution which covers all the important browsers & allows for the footer to be outside the page-wrap.
Anyone know how I can pull this off?
CSS Sticky Footer will do it.
http://www.cssstickyfooter.com/html-code.html
I have 3 vertically aligned div (header, content, footer)
<div id="container">
<div id="header"> </div>
<div id="content"> </div>
<div id="footer"> </div>
</div>
Like this:
Just like in this example: http://jsfiddle.net/jS6pa/2/
(Example from here: http://peterned.home.xs4all.nl/examples/csslayout1.html)
As you can see in the jsfiddle example, I'm unable to complete all the requirements. The footer div doesnt collapse the content when I resize the window. If I make some tweeks I can achieve this but then the overflow:scroll doestn work and the scrollbar is not displayed
Here is another way I tried to solve this ( with no succes :S ) : http://jsfiddle.net/rv4XS/31/
I dont know if one way or another is the best approach to solve this. Just check the first or the second jsfiddle to see which one is the best
How can I achieve a full height content in a scenario where the header has dynamic content and at the same time, show a scrollbar when the content is overflow?
Thanks in advance for any help.
Ok I finally achieve this, using javascript.
The idea is simple. The height of the header has to be setted, no matter what.
For this I dont know why (maybe because this div was called in ajax) but the jquery .height() method didnt worked for me, but using the clientHeight method worked for me well.
var header = document.getElementById('headerDiv');
if(header)
{
$('contentDiv').css('top', header.clientHeight);
}
(When loading) For some reason the content of my page shifts down really far while the background is stationary and then jumps back up to the appropriate placement. Anyone know why or how to fix this issue? I would really appreciate some help. Thanks!
Sounds to me like your background isn't really a background, but rather a layer with an image in it that you've stacked behind your content.
I generally find this to be a pain because if for some reason the z-index of the items get's confused (and it sounds like this is what's happening here), weird things will happen when the page loads.
I personally recommend you set the background image on the same block that all your content goes on. Consider the following
<div id="content">
<div class="header"> </div>
<div class="navigation"> <!-- Menu goes here --> </div>
<div class="main"> <!-- Main content goes here --> </div>
</div>
#content { background: transparent url("Images/mybackground.png"); }
This will set the background on the page element that also houses your content. Assuming I've identified the problem corrently, this should solve your problem.
HTH