I could use some help on a layout. This is what I'm trying to achieve:
Here are the specs:
header has fixed height
footer is always at the bottom and has full width (100%)
content has fixed width
content basically has full height minus the footer, but overlaps the footer by exactly 20px
This of course must work when the content is both shorter and longer than the viewport.
I've been playing around with this for a few hours and I just can't get it to fulfill all the features.
I created a fiddle for it here: http://jsfiddle.net/Sq4Pk/6/
The problems with this solution are currently:
the shorter the viewport gets, the more the content overlaps the footer (must be exactly 20px)
the content part does not fill the viewport
Is this even possible? Can somebody help me out with this?
I've tried these solutions and variations thereof but both are slightly different from my usecase:
http://peterned.home.xs4all.nl/examples/csslayout1.html
http://www.cssstickyfooter.com
Thanks a lot for any help!
Chris
I created a fiddle with a possible workaround, inserting two extra divs in the footer to fake the overlay.
One annoying downside: in Chrome the highest div (to mask the dropshadow) seems to shift 1px upon resize. FF + IE are fine.
http://jsfiddle.net/Sq4Pk/3/
EDIT: found a fix for the pixel shift in Chrome: http://jsfiddle.net/Sq4Pk/4/
EDIT2: or if it's an option to use jQuery, the result is even slightly better: http://jsfiddle.net/Sq4Pk/5/
Related
I have been really stumped on coding this mybb theme. So first off there seems to be a constant padding around the entire container. With firefox I used the identify and the container is only reading my screen to be like 1583 wide while my screen in actuality is 1,600. It has padding for the height as well. Also it seems that whenever I adjust the width to a smaller width it is weighted to the left. I don't want everything floating to the left.
http://img689.imageshack.us/img689/4378/3xeu.png
In this photo provided I have all container, and body set to 100% width. The menu seems to go past it only because I said the width of that to 9,000px wide. But it refuses to go any more left.
it's a margin, not a padding, it's set in some browsers by default in the body tag, just add this to your CSS:
body{margin:0}
To add to the answer above, you should really considering using and adding normalize.css with all your projects/code in order to avoid these issues in the future.
http://necolas.github.io/normalize.css/
I have some webpages that do not reach the bottom of my browser viewport. It's particularly annoying because the footer is full width, so it hovers.
What i want to do is place the footer at least at the bottom of the viewport. I do not want to fix it as per the sticky footer solutions.
To make it more difficult, the footer is variable height.
Is it possible either via css/javascript for fixed height/variable height scenarios?
Try this:
x=$(window).height();
$('.content').css('min-height',x+'px');
Help it works
So basically the website I'm designing has 3 divs inside a container div. One floating to the left. Two to the right one above and one below. They work fine when the browser is maximized. Problem is, when the browser is resized, the right divs wrap below the left div even though I've set min-widths. I want the divs to remain where they are and a scroll bar to appear instead. I did try overflow, no luck. Any solutions?
PS- Initially I had added min-width for the inner divs too. They didn't seem to solve the problem, so I removed them.
A solution or a nudge in the right direction would be really appreciated.
Here's a link to the jsFiddle - http://jsfiddle.net/R62w4/3/
Thank you, Matthew. Although that fixed the wrapping issue, my site now has a thin line of pixels on the right hand side. Any idea how I remove it? It continues from the header till the footer. It isn't affected by any changes to the CSS elements pertaining to the header or navigation bar or footer.
Okay, I found the reason to the extra space on the right side. If I increase my margins for the outer div, the space increases. Is there a way to increase the margins without getting a space?
You might be able to wrap them in this:
<div style="white-space:nowrap;">
</div>
... to prevent that from happening.
It's hard to know exactly where the problem is, could you post some code or make a JSFiddle?
Update:
I believe the problem is that you are using % based widths and px for margins - it's easy to lose track of how much available space you have and subsequently your layout falls apart. Consider that two left floated DIVs of 50% width with 1px of margin each will break on to two lines every time because that's more than 100%.
I changed your fiddle a bit: http://jsfiddle.net/R62w4/5/
... just by moving the left margin from your first DIV and right margin from your other two to the parent container seems to give enough room for everything.
P.S. You can use % based margins and just make sure everything you want to be on one line stays <= 100%.
the simpl css framework shows you how to do percentage based columns with pixel based margins which is what you want.
Here is my site: http://dl.dropbox.com/u/331982/Sandbox/comsat.html
To get the items to appear that are messing up the 100% width: click two hexagons and have your browser maximized.
#playerTwo, the right hand section, has a large chunk appearing off the right side of the browser i.e. scrollbars appear.
I know there are some issues with percentage widths in browsers, and one of the solutions I found was setting the margin and padding to 0px, but it didn't help.
*The reason why I'm using percentages, is because I plan on eventually making the page responsive. =\
This is because you have width:500px on #playerone, #playertwo, and width: 40% on .nameslider, and you don't have position:relative on #playerTwo, so it's width is calculated from the documents' width.
So to fix it you can try to add position:relative;overflow:hidden; to #playerone, #playertwo and set the width for .nameslider to 100%.
Or maybe just experiment a little more — there are a lot of things to improve in your markup :)
I have an absolutely positioned div that has a width of 100% with a background image tiling horizontally. When the browser is shrunk to the point that the width of the browser is less than the page, the remaining right portion of the div's background color is truncated.
Is there a better approach or a hack to resolve this?
Here's the example: link with the div in question being the menu.
Edit: to clarify, reduce the size of your browser so that the full width of the page (960px) requires a scroll-bar. At this point, 100% of the "page", or the viewable area, is actually less than 100% of the content. When this occurs, the menu's background doesn't span the remaining content that would require scrolling to the right to see.
This issue is present in ie7, ie8, and firefox 3.5. I haven't tested the other browsers but I can only assume that this happens there as well.
Thanks
Add:
min-width: 960px;
to the menu div selector. Fixes it for me.
With regards to the actual code structure, and as someone pointed out (but promptly deleted their post), perhaps structure your elements in a more logical layout. There's no reason to have the menu as the bottom child element (as far as I could tell anyway)
It's a more linear, free flowing code structure, rather then a spaghetti mess of containers in random orders, that it can turn into.