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.
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 have a site with two sidebars and the content in the middle. In the HTML it's positioned as:
sidebar 1 - floated left
middle content - floated left
sidebar 2 - floated right
And that's also how it looks on the site. All good. The problem is i'm trying to make the site responsive, and i want the content to be at the top and the sidebars to jump down below, and i'm not entirely sure how to do that. I could use javascript, but i would much prefer CSS to do it, if possible.
Here's the site i'm working on if it helps:
[URL no longer allowed]
Squeeze the window down a bit and watch the left sidebar appear above the content - not good.
Is it possible?
Reorder your divs so the body content div is first.
Then wrap the first sidebar and body content in a div floating the body content to the right. Use a media query so that once your down to mobile size you set the floats to none
<div float:left>
<main-content float:right>
<sidebar float:left>
<\div>
<sidebar float:right>
If you go to Brit.co, you'll notice the sidebar container floats inside the main page container. This allows main page content that is below sidebar content, to wrap under the sidebar.
Explain in different way: A super high WordPress website, say 3,000 px in height, where the sidebar is only 1,000 px high, there is 2,000px of white space under the sidebar container. I'm trying to eliminate that.
Now, I can add container (e.g. footer) under both main content and sidebar wrappers (DIVs), but this is not being done at brit.co.
Sorry, this has us baffled. Normally not an issue b/c our WordPress sites are not that high. Would like to know if there are easy solutions!
Thanks!
it seems like it's just float:right in CSS?
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/