Grow your CSS skills. Land your dream job.

100% Divs – without HTML or BODY tags

  • # September 12, 2012 at 7:39 pm

    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

    Can you throw up your code into http://codepen.io?

    # September 12, 2012 at 9:00 pm

    Cheers Chris!

    http://codepen.io/anon/full/zjeyI

    # September 13, 2012 at 3:18 am

    I still don’t understand what you are trying to accomplish.

    # September 13, 2012 at 5:02 am

    Your problem could be related to floats. Try adding this below floated elements.

    `

    `

    # September 13, 2012 at 5:04 am

    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/

    # September 13, 2012 at 6:32 am

    Please, 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

    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?

    # September 26, 2012 at 12:35 am

    Answer to my own question here. http://css-tricks.com/snippets/css/clear-fix/

    # September 26, 2012 at 3:56 am

    Yes Ryan, it does thanks to the *zoom: 1; property.

    # September 29, 2012 at 1:27 pm

    @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

    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. :/

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".