Hi
It seems I have tried everything to get this CSS styled web page to produce what I could have done easily using a simple table layout :( I have the footer occupying the bottom of the outer wrapper but the trouble is I cannot get the outer wrapper to expand with its content. Both the HTML and CSS validate ok. Can anyone see where I am going wrong? Click Here
use css overflow attribute on the container containing the data.
overflow:auto// scroll will be visible only if content is greater than fixed page size.
or
overflow:scroll//will make scroll visible everytime whether text is long or not to make scroll visible
It seems to me that all of the absolute positioning you are doing is the cause of the issues. Any reason for the use of absolute positioning? If you are trying to create space between elements, you should be using padding and margin for better control of the flow of the doc.
Keep in mind that absolute positioning is going to depend on the parent element set to relative positioning.
Dear ggeof, just remove every thing related to positionning. Positionning is like forcing a block (div in this case) to be at a specific position. Try to avoid this option in css for simple website. In addition, positionning could create a problem in the display on different browsers when used with floatinng, specially in IE. Good Luck
Thanks for the replies guys. JorgeM the absolute positioning is to enable the footer to stay at the bottom of the div. IIM I have added overflow auto. As far as I can see there is no difference. The issue is that the wrapper div is not expanding to accommodate the content.
I still beleive that you are going to have a lot of trouble with the absolute positioning. there are other ways to address this, even the footer concern of staying at the bottom of the div.
For example, if you are looking to create a "sticky" footer, or you simply want to push the footer to the bottom, take a look at this example.. Pushing a Footer to the Bottom of a Web Page
Thanks JorgeM I'll bear that in mind.The method I used for the footer was written by Matthew James Taylor. I think I might have made a mistake. I'll try contacting him.
Ok, good luck and feel free to post any updates that would be helpful for you or anyone else that may come accross this thread.
Thanks JorgeM I have been working on the code trying a variety of modifications. Unfortunately, with little success, except to confirm that the absolutes are required in order to place elements. I have removed the inline CSS to the stylesheet. Both HTML and CSS validate OK. I have carried out the variations etc on a different test web page Click Here
hmm.. if the absolute positioning is required, then maybe someone else that has more experience with that type of setup can provide better guidance. Its not clear to me how to fix this issue for you since its not designed in a fashion that I am familiar with.
I wish I can be of more assistance.
If you wanna fix the footer at bottom.. Why not give it a fixed height... position: fixed and bottom:0;
and then ...width: 100% to make it full fledged...
but then if you give some padding.. horizontal scroll bars might get added....
http://jsfiddle.net/pixelsoul/p4vs6/
I am not sure what effect you were going for with all of the absolute positioning, floats, etc. I assume you were just trying to get the footer at the bottom of the page and that was all. I had to do a lot more than that to make it work though. I know it is not easy to transition from using tables and then trying do a tabless/css layout. Trust me though, once you figure it all out and you realize it, you won't ever want to use tables again unless it is just to show some table data.
Thanks JorgeM for your contributions. For new contributors to this thread let me recap. The web page is designed to accommodate news content so the height of the page will need to vary. The footer is placed where is should be at the bottom of the OuterWrapper div. The header and navigation is also positioned where it should be. The absolute positioning is neccessary to locate page components within the divs. The issue is that the OuterWrapper containing div is not extending to accommodate the contents div material. I have tried overflow auto and at present there is a float left placed in the contents div CSS. The odd thing is that the difference between the footer (placed in the wrapper div) is a constant 335 pixels to the bottom of the display: the min-height set to 100% does not occupy all the screen vertical space. Setting max-height does not alter anything. Increasing or decreasing the container copy does not make any difference. This also strikes me as being odd. for example, removing all the lorem ipsum copy does not alter the page content height. There might be a simple explanation for this but I cannot find it. Any suggestions are most welcome:)
Update. I have successfully added a means to expand the outer wrapper with the content. But it requires a scroll bar. I do not like that. The link to the modified CSS and HTML is Click Here Please note that the earlier links in the thread still work. Does anyone know how I can get rid of the scroll bar now?
locate page components within the divs
I don't understand this comment.
In my opinion this entire layout is very odd, and very unconventional. I don't see any reason for the absolute positioning still. It really feels like the this whole layout is being "forced" together against its will, instead of letting the markup naturally flow and then making the changes where you need to. It all just seems really unnecessary.
max-height being set to 100% will only set the elements height to 100% of the resolution that is being used while viewing the page. It will not expand it to encapsulate all of the content with in a div. The scroll bar in the #content div is from overflow:auto that you have set on it. Your problem with the footer div placement, and the content/outerwrapper div not expanding for all of the content are all being caused by absolute positioning and setting max-height on everything.
Hi pixelsoul thanks for your feedback, but the code for the footer and the navigation comes from well respected sources. I might have made an error in using those resources but so far that has not been found. For the footer code see: [Click Here](http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page) I think the navigation code came from Maxdesign. My main reference source for the use of absolute positioning is: Click Here.
Max height is not used for the last link reference and can have a pixel value or a percentage value anyway. I did try setting max-height to 2000px with a min-height as well (as 100%) hoping that the div would expand. It did not. The reason being if I set min-height to 100% or close and max-height to a couple of screen display heights then the wrapper div would expand according to the content. Well is does not, so much for CSS! what does work is if I set a height on the content div of 55%. but that is not much use when users use F11 or Zoom.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.