Challenging CSS Layout

[astangeland]

I have a general design that I think is near impossible to create without using tables. Even with tables it wouldn't be a very easy to lay it out.

I mocked up the layout as a PDF. You can download CSS Challenge.pdf or go here.

The simplest example of the problem is that I have an image that I want to align left, then on the right I have a column of text. The text should by vertically-aligned to the bottom of the picture. This leaves some whitespace above the text, but there is no way to know exactly what height this whitespace is. All of that is do-able with positioning. But my problem is that I want a single line of text to be centered in the whitespace, and I don't even know how big the whitespace is.

[drhowarddrfine]

**sigh**
Don't challenge me grasshopper.

[astangeland]

Here are images exported from the PDF to make it a little easier to view the problem without downloading anything.

Easier Layout

Complex Layout

[astangeland]

Does that mean you have the solution drhowarddrfine? Because I'm at a total loss here. Any ideas even?

[drhowarddrfine]

Lots of ideas but a line is crossed where people pay me to do this. :)

[astangeland]

...okay. Anyone have any less proprietary ideas? I'm starting to think it's not possible in IE without using tables. CSS seems to be pretty lacking when it comes to vertically stacking elements. It just seems so simple.

Take a column of known height. Place an article in the bottom part of the column. Vertically center a single line quote in the space not used by the bottom article.

It's so simple, but yet impossible to determine how much space the quote has. I can absolutly position the article at the bottom of the column, and I can center the quote in the column's full height (as if the article wasn't there). But I can't come up with any way to center it in the whitespace.

[Death Slaught]

...okay. Anyone have any less proprietary ideas? I'm starting to think it's not possible in IE without using tables. CSS seems to be pretty lacking when it comes to vertically stacking elements. It just seems so simple.

Take a column of known height. Place an article in the bottom part of the column. Vertically center a single line quote in the space not used by the bottom article.

It's so simple, but yet impossible to determine how much space the quote has. I can absolutly position the article at the bottom of the column, and I can center the quote in the column's full height (as if the article wasn't there). But I can't come up with any way to center it in the whitespace.

Hold on I'm working on it :)

Thanks, Death

PS - Odds are I won't have time to finish this today so I'll post them tomorrow.

[Death Slaught]

Well odds are you aren't going to like this, but the only way I'm going to give you the answer is if it has been a learning experience.

So, do you have a failed attempt code? If so please post it, also what makes you think this is possible?

Thanks, Death

PS - I'm talking about the easier one, I'll have the harder one done by tomorrow. Then we can work on the that one.

[astangeland]

...the only way I'm going to give you the answer is if it has been a learning experience. So, do you have a failed attempt code?

It's not as simple as a failed attempt that I can't get to work. I can't even come up with any techniques that could potentially work, so I haven't been able to figure out what to attempt. With that justification of my not posting a failed attempt earlier, I did come up with an idea yesterday that sorta works, so I'll will post one now.

This code should work in FF2, IE6, and IE7 for text sizes of 2 steps smaller than "normal" to 2 steps larger. Which is what I want. Essentially it is a solution. If the text size is larger than 2 steps above normal (only possible in FF) then the blue text covers the quote. (Not that big of deal, I'd still be happy with it if that was the only thing wrong.)

The real problem with it is that I just guessed about where to place the quote. I absolutely positioned the quote -8em above the top of the img. Then pushed it back down with a 150px top padding. This puts it in about the right spot for the default font size. When the user increases the font size the -8em becomes larger, pushing the quote up further. Since the article expands vertically when the font size increases it has to move up to remain centered.

While this all works as intended, it's a very messy solution. I just guessed where to position the quote. Everything is just floating around with no relationship to each other. If I change a single word in the text I'll have to play around with the sizes again to make sure it didn't change the way the text wraps.

Anyway without further ado, here is my mostly working, sloppy, slightly unstable solution.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
    body { width: 510px; margin: 80px auto; font-size: 77%; font-family: sans-serif;}
    img { float: left; }
    #column { margin: 0 5px 0 325px; position: relative; height: 280px; }
    #quote { top: -8em; font-size: 1.1em; position: absolute; width: 180px; padding-top: 150px; text-align: center; }
    #text { position: absolute; bottom: 0; left: 0; width: 180px; background-color: #aed8e6; }
    #text p { margin: 0; padding: 0; }
</style>
 
<body>
    <img alt="Image placeholder 320x280" src="http://i258.photobucket.com/albums/hh259/Death_Slaught/Image.jpg?t=1199805813" width="320" height="280" style="background-color: black" />
 
    <div id="column">
        <div id="quote">
            "Short Quote Text"
        </div>
        <div id="text">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Cras vitae lorem et tortor phare- tra autor. Cras pellentesque.</p> <p>A line I can't see.</p> <p>Another line I can't see.</p> <p>congue.  Ut sed purus. Phasel- lus mi erna, blandit sit amet, lacinia eu, placerat ac, arcu.  Donec ante erat, colutpat eget, pulvinar nec, volutpat ut, odio.</p>
        </div>
    </div>
</body>

If so please post it, also what makes you think this is possible?

I assume you meant: what makes me think this is impossible. Because css doesn't seem to have any styles (that I can think of) for vertical arrangement of items that allow one item to take up some space, and another to use up the remaining space. This is an advantage of tables: you can assign heights to the rows you want and let the others distribute the remaining space amongst themselves.

Normally this problem comes up with widths. And CSS has floats to replace tables in this context....but I don't see how it can be done with heights, since there is no vertical equivalent.

[astangeland]

BTW if you don't feel this is enough of a learning experience, you could just point me in the direction of the techniques you used (what type of styles) and I'll see if I can do it myself first. Of course, I won't complain if you post the code to solve all my problems in one swoop.

[Death Slaught]

Give this a shot.

[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Challenge - Part 1</title>
<style type="text/css">

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:small;
margin:1;
padding:0;
}

#Quote {
width:109px;
position:absolute;
top:60px;
left:368px;
}

#Text {
width:182px;
background-color:lightblue;
position:absolute;
top:119px;
left:334px;
}

</style>
</head>

<body>

<div id="Image">
<img src="F:\Image.jpg" alt="Image" />
</div>

<p id="Quote">
"Short Quote Text"
</p>

<p id="Text">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Cras vitae lorem et tortor phare-
tra auctor. Cras pellentesque.
A line I can't see. <br />
Another line I can't see.
congue. Ut sed purus. Phasel-
us mi urna, blandit sit amet,
lacinia eu, placerat ac, arcu.
Donec ante erat, volutpat eget,
pulvinar nec, volutpat ut, odio.
</p>

</body>

</html>
[/HTML]

When adding more to the quote just reduce the amount of pixels in the top property.

Don't think I'm just giving this to you without a catch.

When you finish the hard one post it.
 

Hope it helps, Thanks, Death

[astangeland]

@drhowarddrfine
Well, there have been two attempts now. After seeing the limits of absolute positioning, do you still feel like you have a better idea, or was that what you were thinking of trying too?

@Death Slaught
Thanks for the effort. Absolute position everything is a technique that only kinda works; unfortunately it suffers from the same inflexibilty of mine. However, I might see if positioning the text from the top instead of the bottom like yours, but using a combination of em's and px's to allow the layout to scale like I did in mine would let it scale up to a larger font-size. It just seems so wrong to just place these elements around arbitrarily without any relationship to each other.



I hate to say it, but in this case a table is more maintainable solution.

I'll keep working on it, and post back here in a day or two if I come up with anything.

[drhowarddrfine]

@drhowarddrfine
Well, there have been two attempts now. After seeing the limits of absolute positioning, do you still feel like you have a better idea, or was that what you were thinking of trying too?

It isn't that I had anything specific but these challenges tend not to be specific enough or change the rules on me when I present solutions so I don't participate; and I just don't have time anymore. In fact, I'm taking a much needed two-week hiatus from this board just to catch up with real work.

I hate to say it, but in this case a table is more maintainable solution.

I've never found a need for tables for layout. I've never done it either because I never learned that way. In fact, I find tables for layout to be hideous and hard to figure out.

All that said, I can't even respond properly because I'm eating dinner while I type this and it's back to work. Yes, I'm very tired.