How can I create this complicated layout using only CSS?


Tags: html,css,layout,vertical-alignment

Problem :

OVERVIEW

I've read a bunch of the "vertical-centering with CSS" tutorials out there:

... but there is another component to my layout that is not represented in any of these methods in addition to the vertical centering.

layout.

There are 2 components to this layout. First, vertically & horizontally centering the content between the header and footer (which is a sticky footer). I have the code in a fiddle to demonstrate but I haven't been able to get this to work in IE (the code is at the bottom of the post).

The second component is where the green arrow is pointing. That represents a hidden element which is meant to expand vertically downwards when clicking on some of the text. However, I DO NOT WANT this expansion to move the content upward as if everything was being centered... I want this element to expand downwards without affecting the position of the content AND pushing the sticky footer down as it expands. In most cases, a browser scrollbar will appear.

So the effect of the hidden element expanding should be like a banner falling off an edge.

This is what the layout should look like after the hidden element has been expanded:

layout2


QUESTION

So how would I achieve this layout using only CSS and have it be cross-browser compatible Please let me know if I need to explain further to clarify confusion.


CODE SO FAR

Note... I have left out some of the boilerplate code that comes with HTML5 BoilerPlate.

CSS

/* --------------------------------------------------------------------------
   General Layout
   -------------------------------------------------------------------------- */
html,body {
    height: 100%;
}

body {
    background-color: #e3e3e3;
    color: #696969;
}

#wrapper {
    min-height: 100%;
    width: 100%;
    min-width: 936px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
header {
    background-color: #232323;
    height: 108px;
    width: 100%;
    margin: auto;
    padding: 24px 0px 8px 0px;
    position: relative;
}

#header-content {
    height: 100%;
    width: 800px;
    margin: auto;
    position: relative;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer {
    background-color: #dbdbdb;
    border-top: 1px solid #bababa;
    height: 30px;
    width: 100%;
    min-width: 936px;
    margin-top: -32px;
    position: relative;
}

#footer-content {
    border-top: 1px solid #f8f8f8;
    height: 100%;
    margin: 0px auto;
    position: relative;
}

#footer-content > div {
    width: 800px;
    margin: 0px auto;
}


/* --------------------------------------------------------------------------
   DOWNLOADZONE
   -------------------------------------------------------------------------- */
#dl-info {
    width: 400px;
    margin: auto;
    display: table-cell !important;
    vertical-align: middle;
}

#show-hide {
    margin: 8px 0px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   General helper classes
   -------------------------------------------------------------------------- */
.zone {
    background: none;
    border: 0px none;
    height: 100%;
    min-height: 100px;
    width: 100%;
    padding-top: 140px;
    padding-bottom: 31px;
    display: table;
    position: absolute;
    top: 0px;
    bottom: 0px;
    overflow: hidden;
}

.border {
    border: 1px solid #454545;
}

.clear {
    clear: both;
}


/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { 
    display: none !important;
    visibility: hidden;
}

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { 
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, 
.visuallyhidden.focusable:focus { 
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, 
.clearfix:after { 
    content: "";
    display: table;
}

.clearfix:after { clear: both; }

.clearfix { *zoom: 1; }

​ HTML

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!-- misteroneill.com/improved-internet-explorer-targeting-through-body-classes/ -->
<!--[if lt IE 7]> <html class="no-js ie ie6 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie ie7 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie ie8 lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie ie9 lt-ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]>
<!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
    <title>Layout</title>
</head>

<body class="select-none">

    <div id="wrapper">

        <header>
            <div id="header-content">
            </div><!-- end #header-content -->
        </header><!-- end header -->

        <div id="downloadzone" class="zone clearfix">

            <div id="dl-info">
                <div class="border">
                    <div id="dl-button">Icon Here</div>
                    <div id="dl-extras">
                        <div id="dl-filename">text text text</div>
                        <div id="show-hide">CLICK TO SHOW/HIDE HIDDEN ELEMENT</div>
                    </div>
                </div>
            </div>

        </div><!-- end #downloadzone -->

    </div><!-- end #wrapper -->

    <footer>
        <div id="footer-content">
            <div class="border-highlight">
            </div><!-- end .border-highlight -->
        </div><!-- end #footer-content -->
    </footer><!-- end footer -->

</body>
</html>
​


Solution :

If I understand you correctly (my apologies if I'm answering the wrong question here), you want an element of unknown height to be horizontally and vertically centered, with a possible other element beneath it that shouldn't affect the position when it's displayed?

How about using overflow? Here's a demo. I'll put the code here soon.

Compatibility warning: the vertical centering method used will not work in Internet Explorer 7 or lower.


    CSS Howto..

    Hide one div when showing another with JavaScript

    How to center a text nav bar with CSS

    How to position bottom of div above top of its container

    How to add css into .scss file or theme

    What is .htc file ?How it works in Internet explorer

    How do you make it so the navbar is transparent then changes color using bootstrap 3. (Affix)

    How to use z-index to make an element overlap another element in CSS

    How to automatically compile LESS into CSS on the server?

    How to make the slider move right and left alternatively

    How to create a 3 section's in a row inside the colophon footer (wordpress)

    How we can add a span to a text inside ul, that is outside of li in jquery or css

    How To Vertically Align Text On A Squarespace Button?

    CSS: How to achieve - Two elements to be centered and positioned side by side WITHOUT a third parent container?

    How to get rid of text form borders in Chrome and Firefox?

    How to change the background color of a line of user input in a textarea?

    Custom Javascript and css added to Wordpress, however, still not working

    make the div (in css) to grow bottom-up? how?

    How do I highlight only the innermost table row of a nested table?

    How to crop Google GeoChart and center its content?

    how to align right hand side image on top of text on mobile screen

    HTML+CSS: How to add shadow (as image) to image?

    How do I get a fixed positioned footer, fixed width right column, left column for the rest using CSS lay-out?

    Jquery slider; made the container transparent, how do I hide the image overflow?

    how to style this form by css (mailchimp)

    How to do proportionate image gallery supporting both horizontal and vertical aspects?

    How to switch position of 2 divs using only CSS?

    How can I 'page zoom' on mobile browser

    How to downsize a larger image while showing only one portion of it in CSS (or adding JS to the mix if necessary)?

    How to get an interactive geographic map for a country? [closed]

    How to Disable button until required fields are filled without using javascript, just HTML5 and CSS