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 :)
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.
Hello i have been working on this website for a while and i have been working on making it resizable when you adjust the window size (or resolution of screen) and when i finally got it to work now the links on the graphics are not clickable
http://javiermedinaloera.com/
Here is my website, all of the circles are coded to be links but only two of them work
Thank you very much, i would really appreciate your help
I know what your problem is: you have 100% width for all items in each line, but they have the same z-index, of course one will "cover" the others. The solution is change the width of them, give each of them a width let's say 250px, then adjust your "left" attribute. Probably you could see your site works in IE, because IE doesn't render your css the ORDINARY way.
Your div tags are not formatted with specific widths. Each div tag is taking up close to the whole width of the page. You need to give them specific widths. In the style tag at the top, add this CSS.
<style type="text/css">#arrieros{ width: 270px; }</style>
Just set the width to 270px for each div that you have and it should work fine.
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/
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.
I have been trawling the web trying to find an answer to my css nightmare question.
The main problem seems to be getting a min-height:580px and a height:100% at the same time in all the browsers.
The thing I need to achieve is:
Site to have a min height of 580px including footer so total height before scroll bars appear is 580px.
Also, a min width is needed of 930px including right and left margin of 15px each side.
left menu of 216px wide and 100% high minus the footer height of 30px.
Main part of the screen should fill all the space available. Unless the screen height is less than 580px or width less than 930px. In this case you get scroll bars.
Compatiblity ie6,7,8, Firefox and Safari.
Can it be done with no Javascript?
There may be cleaner ways, but an idea that comes to mind about the min-height (min-height isn't interpreted by IE<8 anyway):
Place an absolutely positioned, 1 pixel wide, invisible DIV in the left hand corner of the screen. Give it 580 Pixels height.
That should make the height at least 580 Pixels.
The same should be possible with the horizontal width.
You should then be able to work the menu part in the usual way.
Don't forget your HTML element needs height: 100% for height: 100% to work within the body.
First, there's no support for min-height in IE6 or IE7 without javascript, period. So the answer to your question is no.
In general, though (and I'll admit I'm not sure since I haven't tested it thoroughly) but I seem to recall that height:100% overrides the min-height property set in pixels in browsers that do support it.
You could try using a second div either inside or outside your 100% height div that's the 580px you need...