Thanks for you're help.
You can view this online
The problem is my footer. It won't seem to stay below the content. I attempted to use Matthew James Taylor's method which is not working for me. I need the footer to stay below the content when the content fills the page, and stay at the bottom of the window when the content does not fill the page (sticky footer). I'm seeking a non-JS solution.
Thanks again.
put an empty div element at the end of .container element with clear:both; like this
<div style="clear:both;"></div>
And remove height from #tabs element. you have set it as height: 500px;
Related
On this page, the <footer> element is displaying in a fixed position. The footer is cutting off the main content div. This is unintended.
Other pages on the website do not have the footer cutting off the content div.
Using Google Chrome code inspector, when I highlight the footer
<footer class="container_wrap socket_color" id="socket" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter">
There is no display:fixed or display:absolute for <footer>.
I've had a look at the page in Wordpress admin, and there is nothing out of the ordinary with the way it is setup.
Can you see if this is CSS causing this effect? Thank you.
The problem is that in your CSS you have height: 287px; on the #av_section_1 rule (which is your div with the main content of that page)..
If you remove that it works just fine..
remove these from #main
position: relative;
z-index: 2;
overflow: hidden;
remove these from #av_section_1
height: 287px;
Dont know why have you used z-index everywhere and also used overflow:hidden on your main div. The above changes will work for you.
I am stuck and hope someone has an easy solution I've not thought about :-)
I have a 1040px centered div for page content, menu and footer.
The header image shall have the same left margin as the content div AND grow to the right side (for those with higher screen resolutions)
Is there any way to do this using CSS? I know, I could calculate the left margin of the content box with javascript and set the header-margin dynamically, but I would prefer a css solution.
Regards,
Martin
Why not just place the header outside of the sitecontainer?
And then giving it a width of 100%, and a min-width of 1040px.
(Or stretch the background image, depending on if it's 1 color, or an image.)
Is that what you meant? Maybe post the HTML and the CSS, by the way.
Alright, so what you mean is that the header does stretch across, but that the content inside the header (a menu, a logo, whatever) doesn't get centered like the sitecontainer.
If that's the case, here's what to do;
<div id="header">
<div id="headercontent">
<img src="logo.png">
<nav>
<ul>
<li>menuitem</li>
<li>menuitem</li>
<li>menuitem</li>
<li>menuitem</li>
</ul>
</nav>
</div>
</div>
And for the style something like;
#footer{
width: 100%;
min-width: 1040px;
color: [your header color];
}
#headercontent{
[in here you simply put the same styling as the sitecontainer]
}
Is that what you meant? I hope it helped.
I'm having problems avoiding my sidebar to overlap the main content of my blog on tumblr. I am using a premade template on tumblr which i have modified. The only ways I can position my sidebar in the top right corner, is by using an absolute or fixed position:
#sidebar{
position:fixed;
top:20px;
right:20px;
}
When using e.g. relative, the sidebar position itself in the bottom after my main content.
My page is built up like this:
<body>
<div id="page">
<div id="header">
</div>
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
</body>
Click here to see the page.
I tried putting my sidebar inside the page div, but there's a constraint on the width, which I would like to keep. Thank you in advance.
According to your latest comment, this should help your problem:
You could just set a min-width on your page, rearrange your markup a little, and remove some styles on the sidebar. If you leave everything like it is now, then the following will help:
Set min-width: 1250px; on your body tag
Move the sidebar element to before the page element
Remove position: fixed; from the sidebar element
This will prevent the menu from overlapping the page content and will add a horizontal scrollbar to the page when the user's window is less than 1250px. If you want to support a smaller min-width or if you have a problem with the background image becoming not centered at small resolutions, then minor modifications will be necessary.
I am trying to create header , footer and a side bar that extends throughout the content but I am having problem. I have jsfiddle. but I am unsuccessful creating sidbar that is equal and with the containt in height.
See this answer. The user suggests that you give a large bottom padding and a negative bottom padding of the same amount for the sidebar and main divs. Put a container around your sidebar and main div and hide the overflow in it.
For a full length sidebar your best bet is probably the old faux columns method. You could do this in CSS but this is probably easier for you.
Put basically you want an image with your column background's in a thin long strip. You then add this as a background image to your parent div and it acts as pretend full height columns.
eg.
.container {
background: url(your_image) repeat-y left top;
}
<div class="container">
<div class="sidebar">SIDEBAR</div>
<div class="content">CONTENT</div>
</div>
You can read more about it here - http://www.alistapart.com/articles/fauxcolumns/
Hey now define your sidebar and content bar
width in %
as like this
live demo http://jsfiddle.net/zAYru/5/
I have a div with style position:fixed and i want it to scroll down the page, but i don't want the div to spill into the page footer. How could i accomplish this?
thanks in advance,
shawn
Try this.
CSS
body, html {height:100%;margin:0;padding:0} /* margin and padding 0 for firefox*/
.mainBody {height:90%;overflow:auto;}
HTML
<div style="border:1px solid black;">TOP</div>
<div class="mainBody">
<div style="height:800px;"></div> <!-- To for scroll -->
HERE IS Main Body
</div>
This will transfer the scroll bars from the window, to the div that is showing your content.
The TOP div will stay put where ever you want it, so you can position it aboslutely or leave it as is, and have it never collide with your footer, which you can put in your main body div.
I've had the same problem in the past and used a Javascript onscroll event to detect if the position:fixed element is going to collide with the footer. If it is, I change it to position:absolute with a top attribute just above overlapping the footer.
Then when they start scrolling back up the page and it's no longer overlapping the footer, I change it back to position:fixed.
Also, if you're planning to have this element scroll in IE6, I recommend CSS expressions for position:fixed emulation.