I know that 100% DIVs have been covered extensively on the net but I can't seem to find anything specific enough to my circumstances and still have no joy after hours of playing with the CSS.
I've got a "page-wrap" DIV, which design wise, is like a page border. I want it centred based on varying browser sizes or adjustment. Simple margin: 0 auto
However, I want the height of the "page-wrap" DIV and a "content" DIV inside the "page-wrap" to be expandable and based on the content and adjust according.
The issues are I'm working against are as follows:
I'm writing for an ebay template, so I I can't use the HTML or BODY tag to reset the margins. Just HTML stripped of the DOC TYPE info HTML & BODY tags
I can't get the DIV height of both the "page-wrap" and "content" DIV - based on varying content - to be 100% AND centred.
If you're like me and you frequently have to work on sites which have significant numbers of oldIE traffic, make sure you know if support for pseudo selectors covers your users.
As much as I'd like to live in a world where people don't still use IE7 ... I personally don't.
@HugoGiraudel Does this method work in IE7 per chance?
@HugoGiraudel
I'll have to check out what I'm doing wrong on my sites then. I still add the element because the method in my snippets doesn't work in IE7. I'm using the clearfix hack that comes with HTML5 Boilerplate.
It does really suck to have to think about IE7 support still. Unfortunately, a lot of my clients need it. Old people have 6+ year old computers that haven't been upgraded. :/
Hi All,
I know that 100% DIVs have been covered extensively on the net but I can't seem to find anything specific enough to my circumstances and still have no joy after hours of playing with the CSS.
I've got a "page-wrap" DIV, which design wise, is like a page border. I want it centred based on varying browser sizes or adjustment. Simple margin: 0 auto
However, I want the height of the "page-wrap" DIV and a "content" DIV inside the "page-wrap" to be expandable and based on the content and adjust according.
The issues are I'm working against are as follows:
Suggestions and help appreciated?
Can you throw up your code into http://codepen.io?
Cheers Chris!
http://codepen.io/anon/full/zjeyI
I still don't understand what you are trying to accomplish.
Your problem could be related to floats. Try adding this below floated elements.
<div style="clear:both"></div>This could be helpful to anyone learning CSS positioning. It's a bit old, but still good. http://www.barelyfitz.com/screencast/html-training/css/positioning/
Please, don't add an extra element to clear floats. Use this instead :
If you're like me and you frequently have to work on sites which have significant numbers of oldIE traffic, make sure you know if support for pseudo selectors covers your users.
As much as I'd like to live in a world where people don't still use IE7 ... I personally don't.
@HugoGiraudel Does this method work in IE7 per chance?
Answer to my own question here. http://css-tricks.com/snippets/css/clear-fix/
Yes Ryan, it does thanks to the
*zoom: 1;property.@HugoGiraudel I'll have to check out what I'm doing wrong on my sites then. I still add the element because the method in my snippets doesn't work in IE7. I'm using the clearfix hack that comes with HTML5 Boilerplate.
It does really suck to have to think about IE7 support still. Unfortunately, a lot of my clients need it. Old people have 6+ year old computers that haven't been upgraded. :/