Is there a "clean" way to make a bootstrap standard 2-column layout with the sidebar (a list of items) long and scrollable and the main content area fixed? I would like to use the main content area to inject ajax content by intercepting the links on the left, so I would like it to stay always visible.
Just add position: fixed to your sidebar class, and style as you see fit. See an example with Bootstrap here: http://jsfiddle.net/eterpstra/nxrpu/1/
Related
What is wrong with the CSS (at least I think it is CSS related) that one particular div with a slider is not responsive anymore? The rest of the site is still responsive.
http://websiteprofessioneel.nl/
It is the big square image slider in the content right (so not the image in the left sidebar or the header image). The maindiv container that contains the rest of the slider is : <div class="scheeps_slider">
You can see the image is not scaling down anymore if you make the screensize smaller than the image width.
Is there CSS in one of the underlying divs of the slider or li's that break responsiveness?
Extra info:
( Note: It did work responsive fine when the slide was not clickable, but to get it clickable with custom fields html was slightly altered to get a setup with an ul and li approach, but I don't get how that should interfere with responsiviness)
The slider-jquery used here is from opensource 2cycle which acts as a perfectly responsive slider used in other pages so something in the specific css used here is messing it up I think
I've completely at logger heads with how I can get this footer to align with the bottom of the sidebar if zero content is in the space between the header and footer.
Sticky footer is not the solution because I don't want it to be at the bottom of the window. But inline with the bottom of the sidebar instead.
Here is an image of what it should look like but without the coloured blocks there at the moment they push the footer down where it is now.
I can't provide much code as this is on my local server, and is segmented and broken down into different files for wordpress.
screenshot http://s3.amazonaws.com/awesome_screenshot/2110547?AWSAccessKeyId=0R7FMW7AXRVCYMAPTPR2&Expires=1368128529&Signature=GjSmfhU6%2BZoYmSUj6oMEcvNXTEs%3D
as you can see the above screenshot is how I want the sidebar and footer to be with no content there.
Here is another screenshot showing my current problem, you can see how it latch's on to the bottom of any content on the page and sticks just below it.
http://awesomescreenshot.com/015198m642
Thanks in advance.
The sidebar needs a float:right; then create a div between sidebar and footer with clear:both;, have the css for your footer include margin-top:-xx (whatever pixels the footer height is). You might also need to throw a position:relative on there.
http://jsfiddle.net/uuTDG/
Fixed this by adding position relative to my container, then adding position absolute and bottom 0 to my footer.
Thanks anyway for the help
I've been running into this problem for setting up 2-column layouts with a fixed sidebar floated to the right. I'm setting a margin on the content container so it will be fluid as you resize the browser window.
However the content section is actually "above" the sidebar, and so new content pushes the sidebar down the page. You can see a live demo here which I setup for a basic layout.
The only way I know to fix this is by moving the sidebar above the content in my HTML markup. But this doesn't really feel like a fix, and honestly I would like my content to appear before the sidebar since that's how the document is structured. Is there any way to keep the floated sidebar aligned right at the top with the content area?
Have a look at the Media Object http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
demo: http://dabblet.com/gist/3729182
Since you have not provided the widths for the columns, I used my own in percentages. You can use Media Queries to clear the sidebar once it gets too thin.
I'm trying to implement a design with a shrink-wrapped left bar and a fluid main panel, which will allow as many pictures to be shown as the window width will accommodate, without a horizontal scroll bar.
I'm having massive trouble doing this. When I float:left the control bar, the content of the main panel begins to flow around it. Floating the main panel as well solves this, but causes the content to be shrink-wrapped, meaning that the images tend to be lined up in a single column.
Is there any elegant solution to do this?
I've made a mockup of the problem here: http://jsfiddle.net/PYKwg/2/embedded/result/
Try this: http://jsfiddle.net/CXvRn/10/ It's all in the code:
I wrapped #main in #mainWrapper
I added padding-left 220px to #mainWrapper.
I added float:left to "#top .thing" and "#bottom .thing"
http://jsfiddle.net/CXvRn/29/
here is the most basic jquery version:
You have to set some constants such as the total horizontal padding and the horizontal margin for the #main. you could derive those using jQuery but if they are never going to change them you might as well set them your self and save some lines of code.
If you'd like to do it with jquery you can figure that out here: Padding or margin value in pixels as integer using jQuery
The solution is "overflow:auto" on the main-content section. This establishes a new frame of block flow, which content won't flow out of (under/behind the floated control section). Reference: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
See it in action here:
http://jsfiddle.net/PYKwg/3/embedded/result/
(Thanks Alex)
I am using the dcjq accordion to display content on the left of the screen however to the right of that there is seprate content within divs that contain clear: both in the styling, but it seems that the use of clear causes the height of the content to change depending on the accordion beside it.
Both the main content and the accordion are in separate divs but ultimately within the same wrapper div. How can I disconnect them?
If the right-hand div is after the accordion menu then it will always be below if using clear:both
I suggest floating the accordion menu left and the right-hand content to the right and remove the clear from the CSS