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%.
Related
I have set a div to position: fixed in order to maintain a top fixed header. The problem is that the moment that you set a div to postition: fixed; or position: absolute; it's like that div is no longer considered when spacing the content and the content that used to be just below that content is now overlayed. One way to fix this is to wrap in a div and set a fixed margin or height, but what is the margin is not fixed?
When the browser is resized, the height of the fixed div increases, meaning that the fixed height/margin that I implemented no longer suffices. Please have a look at http://littegiant.myfreelancer.co.za. You will see that I added a bunch of <br> in order to assert a fixed-height differential so that the content does not overlap, but that this is no longer enough when the browser width (and thus the header height) changes. I have seen that this is a problem when used the Bootstrap, navbar-fixed-top as well. There HAS to be a way to assing a fixed div and still keep it in mind when populating the other content and scrolling...
Original Width:
Adjusted Width:
There HAS to be a way to assing a fixed div and still keep it in mind
when populating the other content and scrolling...
There is not. What you are observing is (and always has been) part of the CSS spec. absolute or fixed positioned elements are taken out of the normal document flow meaning non-child elements are not affected by them.
Why not use conditional CSS to change the positioning of the overlapping navbar if the window is resized or if the device has a lower resolution.
#media only screen and (max-device-width: 480px) {
#topHeader{
position:relative !important;
}
This appears to give things some room to breathe. You will need to make your slider responsive though, it seems to be dipping off screen.
I hope this helps.
I've coding for about a week now and I'm learning all by my self (which hopefully explain a lot of my errors in this code).
I've tried dozen of examples to get my footer to stick to the bottom of the page.
When i try to change the "position:absolute" of the wrapper or footer, it either gives a gap between the browser window and header or puts the footer up on the top.
I have no idea how to fix this.
(Some tips for my code is also greatly appreciated!)
HTML
http://pastebin.com/ksgJSUpz
CSS
http://pastebin.com/i9nPtYkU
Thanks!
The problem is that you've been using position:absolute throughout your code. Absolute positioning breaks the flow of the document.
If you use relative positioning or if you don't define positioning at all (static position) the elements will run the one after the other. With your code you have to calculate the height of each element end start the next one where the previous ends by hand. This happens because absolute positioned elements don't push other element down. They are as if they have no height. For example you have your header height at 100px; and then you start your info with absolute positioning and top 100px;
Your footer will go and sit at the absolute position that you will tell him to. Problem is that you don't know what that position is since you have an element with variable height. If you put `bottom:0;' with absolute positioning the header will just go and sit at the bottom of its parent. Its parent in your case is the wrapper which has no specific height defined. So the #wrapper gets the height of its contents but since its contents are all absolute positioned inside it and as I said that breaks the flow it doesn't get any height from them. Instead the #wrapper gets the height of the window and not the whole document.
Best thing to do is redesign your page without absolute positioning.
Some quick fixes would be to give your wrapper a specific height like height: 1200px;
That will force your footer to go and sit at the bottom of those 1200 pixels
Example with height at wrapper
Another solution would be to use fixed positioning for your footer. That would make the footer stick at the bottom of the window even while it scrolls.
Example with fixed positioning
But really what you should do is redesign the page from the start and to avoid absolute positioning where its not needed.
I have overflow-x:hidden placed on the body tag of my page so that any content extending beyond the window will not be visible. No scroll bars show up, however, I can still scroll to the left / right to see the content (kinda defeats the purpose of overflow-x).
-ms-overflow-x: doesn't fix the problem either.
There is a wrapper 900px;
Inside the wrapper, there is a div inside:
width:100%;
padding-right:300px;
position:absolute;
left:200px;
I would like the inner div to hang over the right side of the window without causing it to scroll (and leaving a 200px space the its left).
Any help? Thanks!
Since the width of the div is 100%, there should never be an overflow, since the div will always fit 100% of the viewport (assuming you haven't changed the size of your body tag).
As for the padding, the padding is added on after the width, so you're saying the div is 100% of the width of it's container (the body tag), and the padding is an additional 300px to the right, which will be invisible as it's out of the viewport.
You might want to try giving the div an explicit size width and experiment that way.
It may help to see an example of your markup as well, to get an idea of what you're trying to achieve.
More HTML/CSS would be useful, but given what you have right now, my first thought is that your wrapper is still set to position: static (the default for HTML elements).
If you add position: relative to your wrapper, it will contain the absolutely-positioned element within it, and should constrain it to the overflow restrictions.
Additionally, you may want to look into the box-sizing property and how the W3C box model works. In short, your padding is adding to the width of the element, so it's actually (100% + 300px), which results in a size that is larger than the container.
If you don't want to mess with box-sizing, you can also add max-width: 100% to your absolute div to force it to not grow out of its container.
I have a page with divs 250px x 250px which are all positioned absolutely, when one of these divs are opened an ajax call is made which expands the div to show all its contents, these divs are restricted to 600px in width but can be any height depending on info being presented so when a div has alot of content it seems to stretch over my footer which is understandable due to the fact that the widgets hovering on the page.
My question though is can I somehow set my footer to clear this large widget as it seems to be stretching over it?
There is no way of clearing an absolutely positioned div, absolutely positioned divs are taken completely out of the document flow. You can have a look at using a sticky footer which should keep your footer at the very bottom of the page which should visually fix up your page as the footer will no longer abruptly end.
However unless you restructure your HTML or use some javascript to check the height of the div, you wont be able to have the footer appear nicely underneath the div using pure CSS.
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