I have just finished redesigning this site (www.imustsolutions.co.za) and I have a problem with the header and the footer when the user zooms in (Cntrl + in FF).
Here is the problem:
The background color of the footer/header does not paint to fill the rest of the screen (horizontally) when the user zooms in.
What am I doing wrong?
Here is the site again: www.imustsolutions.co.za
Thanks in advance.
Regards,
M
The problem is that the width of your header is set to 100% (100% of the original browser window), whereas your main content is set to 980px.
So when you are on a full size mode, 100% will be greater than 980px, but on resizing or zooming in 100% will become less than 980px and your header will break whereas the main content will overflow to the right, if need be.
Setting a min-width for both the header and the footer to the same value as the width (plus the padding and margin if any) of the main content is usually enough to fix such issues.
With regard to your site, as it seems your main content is set to 980px you may then try:
#header {min-width:980px;}
That's basically how it's supposed to work. The width of a block-level element is determined by the width of its containing block. And the width of the initial containing block (i.e. the containing block of the html element) has the dimensions of the "viewport" (i.e. the browser window).
In other words, unless you've explicitly set widths on your blocks to make them wider than the viewport, they'll never be wider than the viewport.
You can see the same thing happening on the footer of StackOverflow itself too, for example: if you zoom in on this page until you get a horizontal scrollbar and then scroll sideways, you'll see the gray background chopped off too.
One way you could fix this is by turning the entire page into a float, since the width of floating elements shrinks to fits the dimensions of its contents and isn't contrained by the dimensions of the viewport.
Simply adding float: left to the html or body tag should do the trick. I haven't tested that in all browsers, though.
Your header and footer DOM element should be placed within main content. So your header 100% will be limited with main content size:980px
Related
I am working on a website which has two containers: sidebar and the main content.
The problem is that when minimizing the window (only) the left sidebar fits the size of the current size of the screen and when scrolling down the sidebar disappears.. This only happens when the content container (on the right) doesn't fill the screen..
You can try and minimize this page you'll see that the left side bar disappears when scrolling down when window is minimized.
You can try a good page with more content, you'll see that all is fine here..
I tried height="100%" and width="100%"
OK Figured it out
I had to add:
min-height: 100%;
to the body
and use
bottom: 0;
on the sidebar
Thanks for your help :)
The main issue is that the wrapper and sidebar elements in your body are absolutely positioned - therefore the body does not know how to expand to the size of the content of the page itself, as absolutely positioned elements are taken out of the flow of the document. In this case, you have taken all the content of the page out of the document flow.
Therefore, setting a height, or min-height, to the body element will not work, as it will only take on the height of the viewport and nothing else. The children container, being absolutely positioned, will then also take on the height of the viewport.
Scrolling is still possible on the merit that content is overflowing from either one of the absolutely positioned children.
You can try setting height: auto on the sidebar element. Alternatively, you should float your wrapper and sidebar (and take out absolute positioning) - that will at least place the content back into the document flow, allowing the browser to compute the actual 100% height :)
Absolutely positioning is a little bit of a tricky issue, I have to admit.
I'm guessing the containers are divs?
The width should be 100% as you have it there, but for the height, try: line-height:100%.
I know this is a common problem and I feel really stupid for not being able to figure it out, but I have a 3 column layout in HTML, and I seriously cannot figure this out for the life of me.
Here is the basic layout of my site:
fixed header,
1 sidebar on each side,
middle area with content.
Here is a mockup of the site that I'm speaking about: http://eitanrosenberg.com/tests/pop/bootstrap/
It looks ok at first, but when the browser is resized, the sidebars get really small and there is a ton of white space. Why is this? Thank you so much in advance.
Look at it this way.
The height:100% of the container div (and the column divs) gets their height from the body-element (100% of that), and the height of the body element is calculated as 100% of the height of the html element
The height of the html element is then (in practice) calculated from the current height of the browser window (100% of that).
So the height of your boxes will all be set to match the heigth of the browser window...
and this is exactly what you see when you shrink the browser window heigth!
Because:
Once your content no longer fits within the height of its container (ie. when you shrink the browser window you also shrink the calculated heights of all your containers and eventually the headroom will be too small) - overflow happens. The content of the "highest" box will then be the first to overflow, and parts of its content will then spill out of it to be visible below the boxes (since you don't use overflow: hidden).
The browser will then allow you to scroll past the bottom of the boxes (so to speak) in order for you to be able to see the content that "overflows the box", but it doesn't adjust the height of container - the boxes will still keep the same height as the browser window while you scroll...
So the background patterns will always be the height of 100% of the browser window in this example (an not match the height of the highest content when the height shrinks below that)...
One way to remedy this - is to adjust the height of the boxes with Javascript (calculate the height of the highest column and set that as an absolute value for height on the container and the boxes - every time the page resizes)
... or you could use "display: table" and "display: table-cell" on the container and the columns respectively as a workaround (overriding the Bootstrap grid CSS) for this particular layout width/media queries...
Hope this helps!
Good luck!
http://jsfiddle.net/rExDY/
If the result panel is wide enough, the page behaves as I want with the nav on the left and content on the right. What I'd like to happen when the viewport shrinks is to have the content shrink once it hits the nav, rather than wrapping below it. I've been playing around with min-width and can't seem to get it to do what I want.
You have the content width set to 90%. If the viewport is so small that the <nav> box won't fit in the remaining 10% of the width then the content wraps below it. If you reduce the content width to 80% you will see that it behaves much better, but the proper way to write it is to reserve an absolute-width column for the <nav> element on the left of the window.
You might want to try the table-cell property (IE8 and up only), and add a fallback (eg. with fixed with for nav) for IE7 and below:
demo
Why not try playing around with something like this
http://jsfiddle.net/rExDY/27/
The nav and content will not overlap unless the screen is very small. You could use some CSS3 to shift the nav if it reaches a certain width.
I have created a layout in CSS/HTML with the following structure:
Navigation in the footer scrolls the content horizontally to show two different screens. The screen content is fixed height and vertically centered and the layout always fills the entire window.
Because my content has a fixed height, I need the browser to display a vertical scrollbar when the window reaches a certain height.
I also have a couple of position:fixed <canvas> overlays that get cropped by the <html> and <body> elements which are set to height:100%; width:100%.
I hoped that by setting min-height:700px on the <body> selector I could get a scrollbar to appear when the window got too short. This doesn't seem to be work.
How can I make this website generally full-screen but scroll when below a minimum size threshold?
Well, that should effectively make sure the body is always at least 700px. However, position: fixed will still anchor them to the bottom of the viewport, so you will essentially be only scrolling the background. I believe you want the header/footer bars to stick to the top and bottom, so you can always see the full content between them?
So, does something like this fiddle behave more like what you're looking for? http://jsfiddle.net/jblasco/qPB9k/8/
It uses a wrapper div that does the min-height, and uses absolutely positioned bars instead.
Try this: overflow-x: auto;
It will try to put a horizontal scroll bar once the content exceeded the size of its container.
I am creating a blog based on the 960 grid system. It has three simple divs:
header 2. Content 3. Footer and each of them has a fixed width div which holds 2-3 columns of text. The content div, and the fixed width div inside it have the same background color, but when i reduce the size of the browser window, for some reason it ignores the content div's color and reveals the color of the html body.
here's an example of another website where it happens: http://encourageothers.com/ ... reduce the size of the browser to something less than 900 px or so, and scroll horizontally to the right ... u will see what I mean.
Please help me! ... This is driving me nuts!!
jake is absolutely right with the 100% width related to the viewport of the browser.
instead of adding an additional max-width, add an additional MIN-width to the div showing the resize-problem. if your smallest width, before the scrollbar appears, is 1200px - just give the div in question a min-width of 1200px.
Found the solution! ... just set a max-width in pixels and also a width in 100% wherever u see this problem. Works for me.