Forums

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

Home › Forums › CSS › 100% height quandary (NOT EQUAL HEIGHT COLUMNS)

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • December 28, 2011 at 8:13 pm #35871
    see_ess_ess_me
    Member

    This is so simple that I’m embarrassed. I just want a double “border” on a centered container div. I’ve got an inner and an outer container, very very simple. I’ve got height:100% set on the html and body elements, and min-height: 100% set on both containers. Here’s the wrinkle: the inner container only expands to fit the content inside, so the inner border goes missing at the bottom when the viewport is tall.

    When I add height:100% to the outer container, that solves the problem of the inner border not extending, because the descendant inner container now has something to refer to. But when I do so then the outer border becomes no larger than the viewport, so that if content overflows the viewport and the user scrolls down, the outer border is missing.

    I was really hoping to do this with percentages, as part of a responsive design, so I’d rather avoid the faux-columns approach. Thanks in advance.

    Here’s a page dump:


    

    
test1
    

    

    

    

    


    


    

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    December 29, 2011 at 9:22 am #93608
    Mottie
    Member

    Maybe this isn’t what you are looking for, but instead of trying to make the div fit the height, just worry about the container div and add a double border to it. You can use something like

    border: 4px double #000;

    for a double border. Or if you have a border image, you could use the css3 border image.

    Here is an example of css only double, triple and quadruple borders. I’m sure you could add more using :before and :after, but I think this should give you an idea. Using the outline and outline-offset, you can make the border a different color, size or style (e.g. dotted).

    December 30, 2011 at 9:06 pm #93759
    see_ess_ess_me
    Member

    Thanks for the very helpful reply. Lots of good ideas here. BUT…

    Unfortunately “border: double” doesn’t let me set the border thicknesses to be different, which is the name of my game here.

    And “outline” unfortunately always goes all the way around the box. There’s no “outline-left” or “outline-right” property. So that doesn’t quite work.

    And I don’t see how the pseudo class approach could be used to insert a border. I tried inserting a 8000pix tall gif with my border that I made in Photoshop à la:

    #container:before {
    
content: url(8000tall.gif);
    
position: relative;
    
left: -6px;
    
}

    But weirdly the gif is reflowing content inside the container, and isn’t really being inserted before it. So that doesn’t seem to work either.

    That leaves border-image, which frankly has always scared me. The uneven implementation also seems slightly scrappy. Nora’s awesome demo only stokes my fear:

    http://www.norabrowndesign.com/css-experiments/border-image-anim.html

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.