Hi Ben. I tried your code but it is not giving what I need. It's a design thing. Not my design as we have designers that are designing the templates. My job is to make the html look like their comps. Here are the examples:
http://www.sgi.com/tempie.html The first is your code. The second is divs using float left. The third is display: table-cell; (the third looks perfect in Firefox). I need the borders of all 3 cells to match up. Like I said it is a design thing. So far my best solution is a simple table giving each cell the background image that creates the border. Do you know if IE7 will acknowledge the display value table-cell? Thanks for your help by the way. :-) -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ben Curtis Sent: Wednesday, August 17, 2005 9:50 AM To: [email protected] Subject: Re: [WSG] Win IE hacks -- Please help! On Aug 16, 2005, at 9:45 PM, Janelle Clemens wrote: > Thanks Ben. Unfortunately it is not for tabular data but page > layout. But > let me clarify that. The main template (topnav, sidenav, footer) is > in a tabless format and validated. The content area will have a 2 > row, > 3 column > layout. Each cell will contain content, like highlights or list of > products, but not relate to eachother in a tabular fashion. > However each > cell has a bottom border that need to match up so if one cell expands > in > height I need the rest to expand at the same rate. Only a table > can give > this or display: table-cell. I think your previous training with tables has taught you to look at things on a page, instead of things being properties of the content. For example: - you see that the bottom borders of two cells in one row need to line up on the page - I see that there are two equally important content areas which are themselves related; I need to illustrate these relationships by placing the content areas side by side, and making them visually take up the same space as each other. Coding XHTML+CSS is much easier when you look at the semantics first. They share a bottom border. Why? What does this mean? It means they are a group. <style type="text/css"> div.blockContent { float:left; width:100%; border-bottom:2px solid #000; } div.blockContent div { float:left; width:50%; } </style> <div id="primaryContent" class="blockContent"> <div>blah blah blah</div> <div>blah blah blah blah blah blah blah blah blah blah blah blah</div> </div><!-- /primaryContent --> <div id="secondaryContent" class="blockContent"> <div>blah blah blah blah blah blah blah blah blah blah blah blah</div> <div>blah blah blah</div> </div><!-- /secondaryContent --> Notice: the borders matching up on the page indicate that the "cells" are related, and since the border is the relationship, the border property gets assigned to the element that relates them -- the parent div. (The "float:left;" on the parent div is just so that it stretches to enclose all of the floating children. Since the width is 100%, it has no other effect.) -- Ben Curtis : webwright bivia : a personal web studio http://www.bivia.com v: (818) 507-6613 ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ****************************************************** ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
