- This topic is empty.
-
AuthorPosts
-
September 12, 2012 at 7:39 pm #39810dukedingerMember
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:
– 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.Suggestions and help appreciated?
September 12, 2012 at 8:50 pm #109935chrisburtonParticipantCan you throw up your code into http://codepen.io?
September 12, 2012 at 9:00 pm #109938dukedingerMemberCheers Chris!
September 13, 2012 at 3:18 am #109964Kitty GiraudelParticipantI still don’t understand what you are trying to accomplish.
September 13, 2012 at 5:02 am #109968ryanburnetteParticipantYour problem could be related to floats. Try adding this below floated elements.
`
`
September 13, 2012 at 5:04 am #109969ryanburnetteParticipantThis 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/September 13, 2012 at 6:32 am #109971Kitty GiraudelParticipantPlease, don’t add an extra element to clear floats. Use this instead :
.parent-element {
*zoom: 1;
}
.parent-element:after {
content: "";
display: table;
clear: both;
}
September 26, 2012 at 12:33 am #110793ryanburnetteParticipantIf 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?
September 26, 2012 at 12:35 am #110794ryanburnetteParticipantAnswer to my own question here. https://css-tricks.com/snippets/css/clear-fix/
September 26, 2012 at 3:56 am #110800Kitty GiraudelParticipantYes Ryan, it does thanks to the
*zoom: 1;
property.September 29, 2012 at 1:27 pm #111019ryanburnetteParticipant@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](http://html5boilerplate.com/ “”).September 29, 2012 at 1:28 pm #111020ryanburnetteParticipantIt 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. :/
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.