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

Question

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

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

Can this functionality be achieved using only CSS?

Let me know if I need to clarify anything.

Is there a reason you don't want to stick with the JS option? JS is really the best way to handle complex vertical spacing and alignment as CSS doesn't have a lot of abilities in that realm. — DA., Apr 19 '11 at 21:21
yo DA... really the only reason is because I wanted to try doing this using only CSS, kind of as a challenge; it would be really neat to do it using only CSS. however, I'm going to update my question so you can go ahead and do some damage using JavaScript. let's see what you got :) — Hristo, Apr 19 '11 at 21:35
@Marko... which box are you referring to? For right now, let's go with yes. — Hristo, Apr 19 '11 at 21:43
well, it'd certainly be a challenge, but I'm a fan of pragmatic web design. ;o) This is a solution for a screwdriver when CSS is the hammer. The JS logic would be to calculate the height of both divs, then change the one that is shorter to match the one that is longer by setting it's height. Additional logic could be added to handle your other variables. Are you using jQuery? — DA., Apr 19 '11 at 22:29
@DA... I know how to do it, but syntactically I don't. What I mean by that is I don't know how to actually get heights of elements and positions in JavaScript, but I know the logic of how to solve the problem :) that said, yes of course I'm using jQuery :) — Hristo, Apr 19 '11 at 22:56

ninjagecko · Answer 1 · 2011-04-19T20:49:25.223

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>

how do I get the blue column to initially reach the footer in terms of height? — Hristo, Apr 19 '11 at 18:07
You did not ask for that. =) So unfortunately it's a bit harder. If I had known I would have made it be that way. Let me ponder it for a tiny bit. — ninjagecko, Apr 19 '11 at 18:47
@ninjagecko... I did ask that... `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.` — Hristo, Apr 19 '11 at 18:50
@ninjagecko... ponder away :) there is no rush, besides the desire to get this to work :) — Hristo, Apr 19 '11 at 19:22
solved, enjoy =) (you can tweak the values a tiny bit so the scrollbars don't show up at the start) edit: just added overflow-y:scroll; — ninjagecko, Apr 19 '11 at 20:24
@ninjagecko... that looks legit. I'm going to try to integrate it with my stuff. I'll let you know if it worked or not. In the meantime, would you mind giving a brief explanation on what you did? — Hristo, Apr 19 '11 at 20:43
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. — ninjagecko, Apr 19 '11 at 20:49
A random note: please remember to always include a doctype to ensure your page isn't in Quirks Mode. For more information, see some of my answers here: http://stackoverflow.com/search?tab=votes&q=user%3a405015%20%5bdoctype%5d - like this one: http://stackoverflow.com/questions/5669077/internet-explorer-css-problem-hidden-padding/5669132#5669132 — thirtydot, Apr 20 '11 at 00:27

Julius Musseau · Answer 2 · 2011-04-20T18:55:04.570

2

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

edited Apr 20 '11 at 18:55

answered Apr 19 '11 at 21:43

Julius Musseau

4,037
23
27

don't see any elephants, especially pink ones – Hristo Apr 19 '11 at 21:43
1

? Probably not. Display: Table? Certainly a valid option. – DA. Apr 19 '11 at 22:30
+1 to DA.... ROTFL! Let me see if I understand correctly? no good, but
is okay????
– Julius Musseau Apr 20 '11 at 17:14
Does become acceptable if we set *it* in CSS to anything EXCEPT display: table? Is a 'display:block' table okay?
– Julius Musseau Apr 20 '11 at 17:15

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 20 '11 at 10:35

clairesuzy

27,296
8
54
52

@clairesuzy... this is not quite what I'm looking for. 1) Thank you for pointing out that my solution fails when narrowing the window, that is easily fixed with `min-width`. 2) My solution does have a sticky footer, but it seems to not be working in Firefox quite right. 3) your solution fails when the content in the content in the blue area gets to large... http://jsfiddle.net/UnsungHero97/qe6P8/2/embedded/result/ ... when I say sticky footer, I don't mean ALWAYS be on the bottom, only when there is not enough content to push it to the bottom. check out http://www.cssstickyfooter.com/ – Hristo Apr 20 '11 at 13:28
@Hristo I don't understand, it was working and is again ;).. I have updated the links in my answer to have a JS toggle to show/hide content, my footer is sticky, but the background image idea (to fake the full page width) didn't work in FF so I've removed it, the footer itself does actually only stick to the bottom only if content is too short. – clairesuzy Apr 20 '11 at 14:33
@clairesuzy... haha awesome. I think this is correct, but I need to play around with it a bit more. I'll get back to you. Thanks for making the changes! – Hristo Apr 20 '11 at 16:20
1

btw... awesome job! I wish I could upvote you multiple times. It works great in your example, exactly what I'm looking for. I'm going to try and integrate it with my project and hopefully it all works out. many thanks! – Hristo Apr 20 '11 at 16:21
@clairesuzy... what is the CSS property `xheight`? – Hristo Apr 22 '11 at 06:25
@Hristo there isn't one.. my bad.. i add an x when testing to quickly remove a property - you can just delete it.. I had the top div at fixed height before I added the tabs **sorry** – clairesuzy Apr 22 '11 at 08:38
@clairesuzy... thank you :) you also have a weird CSS property, `ul#menu li {display: inline !ie7;}` what does this do? if this does what I think it does, shouldn't it be in the conditional stylesheet? – Hristo Apr 22 '11 at 15:43
Yes you can feed it to `lte IE7` in a conditional stylesheet (doesn't need the `!ie7` in conditional sheet).. it's the hack that makes IE7 and below honour `inline-block` on block level elements - either way, hack or conditional sheet, it **cannot** go in the same ruleset as the `inline-block` rule (e.g. via a `*` hack) unless the element already has hasLayout `:)` – clairesuzy Apr 22 '11 at 17:46
@clairesuzy... thank you! I haven't tested in IE but I don't plan on it for now. Anyway, I have another challenge for you :) check out this question... http://stackoverflow.com/q/5768029/196921 – Hristo Apr 24 '11 at 01:43

score 0 · Answer 4 · answered Apr 19 '11 at 18:26

0

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

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.
Use css overflow: auto; for your pink column; for the blue, set overflow: auto; on the or tag.
I hope this helps...

answered Apr 19 '11 at 18:26

gmiller

43
4

@Greg... thanks for your response. Its not quite as simple as top, middle, footer. I wish :) It is more of a large top and a footer such that two are dependent on each other. – Hristo Apr 19 '11 at 18:30
@Hristo...this was the solution to something I did a few weeks ago. I thought it might fit your need. In my solution I needed to have a special look to the top and bottom. But it was floating in the middle of the page instead of the whole page; not exactly your need. Be well – gmiller Apr 19 '11 at 20:49
@Greg... thank you. I'm glad it worked out for you. However, I need to keep working at my solution. – Hristo Apr 20 '11 at 13:33