My sidebar is move under content blog when i publish post - wordpress

i have a issue in my blog
My sidebar is move under content blog when i publish post, but when i save draft it normal.
Here is the link : https://digitalbyrick.com/ya/
Please helping me to fix it to normal

The width of the element ".has-shadow" is set to a fixed width of 1050px. The width of the ".widget-area" element in your sidebar is set to 280px. This causes the content to overlap as you shrink the screen. These values should be percentages or a "max-width: 100%" CSS rule should be applied to make them fit inside their containers.

Related

Respecting Header Height

I need help aligning my fixed widget and floating navigation. Currently the fixed widget does not respect the height of my floating navigation and aligns top when in its fixed position. I am currently using "Q2W3 Fixed Widget" for my sidebar widget and CSS to "float" the navigation.
I would like the fixed widget to align bottom of the nav and not have half of the text get hidden behind the nav.
If you need to see a live page demonstration/code, here is an example. Thank you!
So I was looking at the faq at https://wordpress.org/plugins/q2w3-fixed-widget/faq/. You can set a bottom and top margin as explained in the following section:
How to prevent overlapping with the footer?
Make sure you have updated plugin to version 2.x. Go to WP admin area, Appearance -> Fixed Widget Options. Here you can define top and bottom margins. Set bottom margin value >= footer height. Check the result.

Background not covering site on one page

I am working on this page: http://www.myfortune3cart.com/journeyfilm/cartadd.cgi
The background below the horizontal navigation is not continuing down to the footer. It does work on other pages:
http://www.myfortune3cart.com/journeyfilm/Products.html
I can't find where to change the css.
Screen shot:
Thank you,
Matt
What happening is on your Product page your background extends to the footer because there is content that fills the container. On your home page the background image does not do this because you dont have enough content to allow the container to extend to your footer.
So once you add your content to the home page the container will grow closer to the footer if there is enough content. If that is not good enough you can add a min-height to your content container so it always touches your footer. I added a min-height: 800px; to your .page-right-container and your content will show like you intended. You will have to adjust the number to fit exactly the way you want but that should get you started.

Aligning footer with the sidebar

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

2-Column Fixed Width Sidebar w/ Fluid Content Not Aligned Properly

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.

how to prevent div sidebar from overlapping content?

I have a div sidebar which scrolls with the page on my website. Everytime the window resizes, the sidebar would overlap the page content.
Here is a demo page to show the problem:
http://wrasa.org/memberpage_demo.html
Here is the CSS code for the menubar I'm using for my page
.menubar {width: 200px;position: fixed;left: 20px;down: 200px;}
Any suggestions for fixing the problem or using a different code would be welcomed,
Thanks in advance!
As, you are using fixed positioning; div will remain fixed relative to the browser and will overlap if other content shift in the area. This happens because browser don't allocate any space to such divs.
In your problem you be solved by specifying the min-margin to left of main content, which can actually be achieved by min-width css property. just place one more to left of main content with some min width.
You can know more on this from this link
Using a percentage margin in CSS but want a minimum margin in pixels?

Resources