Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS 100% Divs – without HTML or BODY tags

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #39810
    dukedinger
    Member

    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?

    #109935
    chrisburton
    Participant

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

    #109938
    dukedinger
    Member
    #109964
    Kitty Giraudel
    Participant

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

    #109968
    ryanburnette
    Participant

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

    `

    `

    #109969
    ryanburnette
    Participant

    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/

    #109971
    Kitty Giraudel
    Participant

    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;
    }
    #110793
    ryanburnette
    Participant

    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?

    #110794
    ryanburnette
    Participant

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

    #110800
    Kitty Giraudel
    Participant

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

    #111019
    ryanburnette
    Participant

    @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/ “”).

    #111020
    ryanburnette
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.