I have experienced a frustrating and interesting problem.
The design I am working on is based around a 100% height layout.
A site page always has an image.
Which can only ever be 800px in height.
A max-height of 100% is set on this image.
The results in a site that works nicely on large monitors, but on smaller screens the images will adjust meaning the site always fits nicely.
-
Because the site uses a horizontal scroll, I am making use of a position: fixed, on the #footer nav, to position the navigation in the bottom right.
However, when the screen has a height greater than 800px, this footer #nav remains in the bottom right corner.
I am trying to find a solution that would allow this fixed element, to be fixed, relative to the height of the container div. Meaning the navigation is always 1em above the bottom of the site layout.
-
You can see the site here - http://eastat1003.dev.voodoobytes.net/artists/bukanova/art-direction/idol-magazine-the-selected-ones/
-
Edited 17th May 2012 - Site now live! http://www.eastatheart.com/
Ok, got what you are after, took me a few mins!
I haven't got time to check this now, but it should (hopefully) work.
Create a container element, set to position fixed. Position that to the top right of the screen. Set the width to 0 and height to 100%. Also set a min-height of 800px.
Now, put your nav in there set to position absolute. Then set that to bottom 1em right 0.
That should work, I think...
Hope that helps :)
Related
If I resize browser window (Newest Chrome in my case) so it gets horizontal scrollbar then the header div gets "cut off". In that case scrolling to right reveals some empty space. This is because the main content other then header have fixed width.
But the header div has 100% width and div is a block element by default also so it should stretch by itself to the 100% of the page width. Why it is not doing so? Shouldn't it be the default behavior? And why StackOverflow team didn't fix it?
The problem I found on many pages, including StackOverflow:
So I've been googling, even found a solution for a problem but not satisfactory enough. The solution is to set the min-width property to the width of that 's content. But isn't there a better solution?
I'm searching for a better solution, if any? Also I'm searching for an reasonable explanation why div's default behavior to stretch 100% of the width doesn't apply here?
You see a white space because, somewhere on the page, most likely under the header element, there is an element which is bigger than 100% – that's why you see the horizontal scrollbar.
The header infact is 100%, which means it's shorter than the full width of the document - therefore the white space.
To debug, I usually open the inspector and start from the bottom to the top and delete the sibling of the header, one by one, till I get to the point where everything is no more white space. At that point you know the problem is with the last element you just deleted. Try to look for errors in that particular element.
The "cut-off" div has a width of 100% of the visible area, so everything is ok.
The Problem is, that the content is overflowing and you are now able to scroll to the 120% width.
To fix this behavior und stretch your "cut-off" div always over the full width of the page, you can apply some css:
position: absolute;
left: 0;
right: 0;
Inspect the body element and you'll see that it only extends as far as the viewport. The topbar-wrapper is 980px fixed width, and its parent with the black background, topbar, is 100% (of body). topbar also needs a width of 980px, or the body element needs min-width: 980px...here on the StackOverflow site (looks like you found a bug)
This is a problem I often found on builds I was reviewing from freelancers, where they forget to shrink their browser down. The full-width sections usually need min-widths, if the site isn't fluid and there are fixed-width elements.
I am trying to create a sticky footer on a custom WordPress theme. I have looked at many online tutorials with no success.
It does not seem to be working responsively, it sticks, but as soon as I re-size the browser the height increases.
The footer needs to be responsive but also stick to the bottom of the page regardless of content size.
The website in question is:
http://shopexample.co.uk/
Would really appreciate some help on this one.
Thanks :)
The problem is not your footer expanding, it is related to image dimensions and body.
When you resize your browser (smaller), the background-images' size adapts to the viewport's width, not its height. That means that at a certain point, the image doesn't vertically fit the viewport anymore.
Then what is visible is the background-color of your body.custom-background, which is, coincidentally, exactly the same color as your footer's background (background-color: #cccccc;).
You can change the background-color of your body to distinguish it from the footer. You cannot resize the image to full-browser width AND height simultaneously without distortions.
Sticky footers: I noticed your footer & its wrapper are not positioned fixed or relative, which is the common approach for sticky footers. Then position it with the bottom property.
Fixed position:
will stick to bottom
will not scroll
will always be visible
Relative position:
will stick to bottom
will scroll
will only be visible on reaching page bottom
Check the working copy of your fiddle here http://jsfiddle.net/Mohinder/Yj6gu/
Problem was with headerwrap which was not closed where it should be and with body height.
I have a div that is centered on my website using margin: auto;
but for some reason if i start to shrink the width of my browser the div i showed in the image below begisn to move left with the browser, and wont stay in its position. I have tried using the position: thing but it doesnt seem to be working for my issue.
How can i get this div to stay centered and not move with the browser?
You can see the issue here on My Website
If you trysh rinking the browser width beyond a certain point that div just begins to move and isnt centered anymore.
Its a problem because people with small resolutions will not see the website right.
The div that seems to be having the issue is main-frontpage
change to min-width of your #footer to the same as the .jflow-content-slider & #main-frontpage (1050px) and then at least your content slider will not overlap the text at the bottom.
EDIT: looking again at your setup, just change the width of your #main-frontpage to the same as #footer #content-wrapper - 1240px. Really this is way too wide and it should be 960px wide but unless you change the width of your footer content this the only way to do it
I have the problem that a div is not scaling over the full page when the page is not fully seen, i.e. scroll bars appear at the bottom.
Scales fine:
Does not scale fine when seen part is too small:
How can this be fixed? Here's the fiddle: http://jsfiddle.net/gdztn/29/
Clarification: The inner div must always be 800 px wide while the outter div should scale over the whole width of the page. As you can see in the second image, the outter div does not reach the right end of the page when scrollbars appear.
Thanks!
the problem is that the #head width is 100% and the inner div has a fixed width. if you scale the page down, it's still 100% but smaller than the inner div. it's like having a smaller container and an exceedingly bigger content which overflows.
to address this problem, you should set min-width of the #head to keep it from shrinking smaller than the inner div, like min-width: 850px
http://jsfiddle.net/gdztn/43/
EDIT: also remove position:absolute from #head. if actually needed to be absolute, then add width:100%
Check my website, and see the Divisions left menu. When you have maximized your broswer there is no problem, but when you restore it to half of screen, the left menu overlaps to the right.
Here is the CSS code. Can someone help me?
It's because your "divisions" div is absolutely positioned.
You can remove "position: absolute" and increase the width of the "divisions" div to 300px.
Your left menu is absolutely positioned that's why it overlaps other content when window size is too narrow. But the solution for this problem is quite tricky and actually depends on what you want to achieve.
Percentage
One possible solutions would be to set width on "divisions" and "content" div in percentage. This way they'll never overlap. But it depends if you can afford to have dynamic width for your "content" div.
Repositioning
If your content must be fixed width... You'll first have to decide how would you like your content/menu to appear when window is too narrow (maybe even narrower than content width)... And work from there.
Body element width
Set minimum window content (as in <body>) width. Either by using:
transparent image at the beginning of your document <img src="t.gif" width="1250">
set body's minimum width css as min-width: 1250px; has to be 1250px wide, because content is centrally positioned, so it must have equal space on the left and on the right (right one being useless empty space just allowing non overlapping space on the left of content)
The last one is actually the simplest and works. It only makes it a bit wide for smaller screen sizes, but your content width (including menu on the left) already exceeds 1030px anyway...
A very straight-forward and simple
and quick-fix solution would be with CSS :
#content {style.css (line 17)
left:-270px;
margin:0 auto;
padding:30px 10px 0 550px;
position:relative;
width:780px;
}
I tried this in my Firebug and it worked fine. hope it'll suit you're needs :)
next time just use css floats:
put the side menu and the content div in a wrapper,
float:left for the menu, and give the wrapper a fixed width, and center align it.
you can also make the navigation menu go "out" from the left with negative left positioning it.