This is going to be a challenge because CSS containers don't speak to each other the way table columns do. The height of each CSS container (left & right) will be individually determined by how much content it contains. Thus left and right sides won't line up as they do in your table example.
When you need a table, often it's better to use a table rather than beat your head against a wall trying to invent one with CSS -- which probably won't do what you want anyway.
YAY ! Finally someone not deriding those of us who still find tables useful in some circumstances. And to have it said by the vaunted NancyO makes it ten times better.
Thanks Nancy.... lol Texas Brad. hehe..yup, whut he said...cuz tables are an old friend while CSS is a permanent houseguest...
However it's not the content aligning I'm referring to...just the shape of the container with the thick bar at top holding type and how to space them vertically, say 3 px apart...
Was trying an outside container div that had the 1px border, and an inner div for the thick bar and one for the bodycopy. Then using a bottom margin setting on the outside container for vertical spacing. But I can't get it looking like my example where the top bar is only slightly deeper than the type inside it.
Thanks for taking the time to help me Nancy! Very much appreciate that. I was following along your CSS, nodding my head until I got to .clearing - sheesh, how do you come up with this stuff? Once again your whizardry makes my head spin.
I like the 1px border, why can't tables have that thin rule?
I experimented with your example and got closer to what I want. Example. My left and right column text boxes will always be uneven depths, so I put a wrapper around the box for the 1px rule and took yours off. It seems having the top color bar as part of a text block isn't ideal for what I want, so I decided I need a separate container for this so I can center type, but my .box colorbar property doesn't even display...? And my text blocks I spaced away from the top and bottom with line breaks because I can't find the property to space them right.
It seems like I'm pretty close, but do you think it makes sense to replace my tables with CSS?
1 person found this helpful
Another example with CSS styled tables.
Use whichever methods works best for the task. Personally, I would use tables for this.
I like that. Thanks for your help!