CODEWITHSUNDEEP
javascriptcsslayout
Hristo
Hristo

Reputation: 46477

How to create a table-like CSS layout with DIVs?

UPDATE 2

I found a tentative solution that currently works for me in Chrome on Mac OS X. You can check out my answer below for details. For those of you who are still trying to come up with CSS only solutions or JavaScript solutions, please keep going and let me know what you come up with! Please :)

UPDATE

The answer below is really close to an all CSS solution, so I'm going to try to make it work. In the meantime, I'm opening up this question to JavaScript solutions as well. How would you do it using JavaScript? All solutions are now welcome :)

Let's see if we can solve this one together!

I'm trying to set up a layout, check out the image...

layout

I'm using the "sticky footer" technique, which works great, and I've set it up so that whenever one of the two columns gets taller, the other will also match its height, as described in this article. The problem, however, is that these two columns don't reach the footer naturally... I'm forcing the height through JavaScript.

Anyway, all the relevant code can be seen in the fiddle...

CODE

http://jsfiddle.net/UnsungHero97/XrJMa/embedded/result/

QUESTIONS

  1. First big problem: how can I set it up so that the height of these columns reaches the footer below? I want it so that when the page loads, both pink and blue columns reach the bottom automatically.

  2. How can I get it so that when the pink column grows beyond its current height, a local scrollbar appears, but when the blue column grows beyond its current height, the overall page scrollbar appears and the footer is pushed down?

- basically, I want the height of the pink and blue columns to ALWAYS be the same height but the height is only determined by the blue column; blue is dominant so it can expand the height of both columns; pink cannot expand the height, just be at the same height as blue
  1. Can this functionality be achieved using only CSS?

Let me know if I need to clarify anything.

Upvotes: 3

Views: 452

Answers (4)

clairesuzy
clairesuzy

Reputation: 27624

based on your most recent answer, I take it you don't need the footer to be full width (only sticky, though yours isn't) and also I presume you know that your version will only work if you know the height of the "foo - not so important content", as you need the that height to set the top co-ordinate for the sidebar .

You version falls down in that when you narrow the window content disappears off the sides.. but based on the thinking behind it - I've used your logic extended it and built in the sticky footer, top menu - everything that was in the original example link.

the footer's not full width, but you can make it look like it is by putting a background image on the html element, I have a plain dummy image in my fiddle but it's not showing up, anyway you would make an image the same height/color as the footer with the 1px border built in

this absolutely relies on you being able to fix/calculate the height of everything above the pink/blue columns

there is a lot less container divs needed for this and the content is now before the sidebar in the source

Here's the fiddle : fullsize : to edit

Upvotes: 1

Julius Musseau
Julius Musseau

Reputation: 4155

Is it just me, or is the pink elephant in the room sitting on a ...

< T A B L E >

???

Update (April 20th, 11:40AM): Here's the <table> version:

http://juliusdavies.ca/stackoverflow/pink_elephant.html

Be sure to resize your browser window a few times to see it in action.

  • IE8 - perfect
  • Chrome - perfect
  • Safari - no scrollbar, otherwise okay
  • Firefox - no scrollbar, otherwise okay

Upvotes: 2

ninjagecko
ninjagecko

Reputation: 91092

There were many issues, so I rewrote it. I have created exactly what you want. Enjoy. =)

http://jsfiddle.net/hRkx8/53/

The trick is to have your main region have a margin-bottom the same height as your footer (which you absolutely position). Thus as your blue thing gets larger, it will start pushing the bottom of the page a bit earlier than it normally would.

(edit: this version moves the footer, which is more difficult to do; however the question asked that the blue area be initialized to be as large as possible, see below for one way to do this)

Here we go! Unfortunately I have to include it inline, since jsfiddle has some severe bugs that prevent proper display. This version has the blue area start all the way at the bottom.

absolutely-positioned elements seem to have some trouble automatically scrolling as the page gets bigger, so I created a dummy #main div much like you did and had it fill the entire viewport, then inside that is both the #footer and #content (your blue and red stuff). The #footer is absolutely positioned so it takes up no space / the document doesn't care about it. As the #content expands, the #main container expands with it, dragging the footer along. The use of a margin-bottom is necessary to prevent the footer from hiding text.

The actual amount of CSS required to do this is, if you remove the demo stuff, just about 5 lines and dummy element.

<html>
<head>

<style>

body {
    margin:0; padding:0;
}

* { /* just for demonstration */
    box-sizing:border-box;
    padding:5px;
    border:1px dashed red;
    -webkit-border-radius:10px; -moz-border-radius:10px;
    background-color:hsla(0,50%,50%, 0.1);
}

/*important to use min-height not height*/

#main {
    position:relative; width:100%; min-height:100%;
    border:3px solid green;
}
#footer {
    position:absolute;
    left:0px; right:0px; bottom:0px; height:5em; /*can be anything*/
    background-color:lightgrey;
}

#content {
    position:relative;
    box-sizing:border-box;
    background-color:skyblue;
    margin-left:auto; margin-right:auto;
    padding-bottom:5em; /*must be same as #footer's height*/
    margin-top:10%; /*browser bug: actually acts like 20%*/
    width:50%;
    min-height:80%; /*should equal 100%-marginTop*/
    border:3px solid blue;
}
/* dependent elements */
#sidebar {
    position:absolute;
    top:0px; bottom:0px;
    right:100%; width:7em;
    background-color:pink;
overflow-y:scroll;
}
#topbar {
    position:absolute;
    bottom:100%; height:3em;
    right:-10%; left:10%;    
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>

setTimeout("$('pre').animate({height:1500}, 3000)", 1000);  

</script>

</head>
<body>

<div id="everything">
    <div id="main">

        <div id="content">
            <div id="sidebar">
                alpha
                <br/>
                beta
                <br/>
                gamma
                <br/>
                etc.
            </div>
            <div id="topbar">
                Menu1 * Menu2 * Menu3 * ...
            </div>
            This is my site.
            Yay.
            <pre>
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            </pre>
        </div>

        <div id="footer">
            footer
        </div>
    </div>
</div>

</body>
</html>

Upvotes: 2

gmiller
gmiller

Reputation: 43

I see this as a design having a top a middle and a footer. The middle section contains both the pink and blue columns.

  1. Using CSS, place a repeating image in the background of the middle-section behind both the left and right columns. This image would show the edges of both columns. Hopefully your design will accommodate this. I admit I do not know, without really digging into the code, how to make the middle expand all the way down to the bottom. I should think there are some different ways to approach this.

  2. Use css overflow: auto; for your pink column; for the blue, set overflow: auto; on the or tag.

  3. I hope this helps...

Upvotes: 0

Related Questions