CSS vs Tables robust columns without tables

Hello,

I have been struggling with this concept for (too many hours to actually admit). A few days ago I convinced myself of the power of using CSS for layout, or maybe better stated, not using the markup for layout purposes. To this end, I am trying to redesign my site without using tables. But despite the zillion of articles I have read, it doesn't appear to be as simple as they say, or my question is slightly different. I already have the site working, but I didn't follow this mantra of separating layout from content in my design. Being the bone-head that I am, I am fixing something that is not broken. So then, if just for an academic exercise, and to convince myself that replacing tables with CSS can truly be done without sacrificing any layout features, I would like to solve the following problem without using the <TABLE> tag nor any javascript.

The problem:
I have two block elements, say, block element A and block element B. Block element A is of unknown width, but should be static in width when the window is resized. Block element B is also of unknown width and should be fluid when the window is resized. Moreover, block element B should be centered between block element A's right edge and the right edge of the window. This is assuming, that block element A doesn't already take up the full width of the window. (This is an okay assumption for now).

For this I think it would be safe to assume there is a container block element of "width: 100%;".

I suppose for now, I would like to just see it work in Firefox 2.0, from there I can try and find a IE 6 hack if need be.

Here is a few of the ideas that I have tried, but couldn't get it to meet 'all' of the criteria above.
-different float arrangements
-margin: 0 auto;
-display: table;
-display; table-cell;
-display; inline-table;

I don't know, I am just stuck. Maybe I should post the 'equivalent' 'table' version of this problem. That might be a better way to ask this question. The table I am trying to 'mimic' looks like this:

<TABLE width="100%">
<TR align="center">
<TD>
<!--Block element A -->
</TD>
<TD>
<!--Block element B -->
</TD>
</TR>
</TABLE>

This meets the above criteria.

If I am interpreting this correctly, the last table cell gets a width percentage equal to the "remaining" width of the screen. The phrase remaining width is used to mean the width across the screen after the first table cell is placed. Is this correct? Is there such a symbol for "remaining screen width percentage" in CSS?

The above table is a relatively simple table. If I could see this same behavior without <TABLE> tags, I will change my party line and vote CSS. There are a lot of cool things that CSS can do, I understand its "power". I also understand some of its draw backs, (standards aren't fully implemented across browsers, for one). I can look past this draw back, if the above can be shown to me. I want to believe! Please convert me.

Thanks in advance,
Hopefully this is a dumb question and someone has the "obvious" answer right away at which point I will kick myself for not thinking of that, but nevertheless I will be extremely grateful and appreciative for being made the fool.

Dan K

 

it sounds like you are trying to make a two colume table layout... there are tons tutorials on this, but if you are going css just abandon the tables all together.
i kinda did what you are talking about with my site, Ineedquarters.com.
also dont forget that you can use the :fixed; attribute.

 

Thanks for your reply,

I have read many 2/3/4 column layouts and tutorials. I cannot find any that meet the criteria of my problem (if so I could I wouldn't be posting).

Specifically, box A (column 1) should be static, and box B (column 2) should be dynamic in size. Both boxes are unknown widths. Moreover, the boxes should be centered within their respective columns.

I checked out your site (cool btw).

Essentially your site uses all static, cold-coded, pre-known widths. There is nothing dynamic about your site...that I can see.

Essentially if you take that table below, the table will shrink and expand when you change the width of the monitor without putting a scroll bar at the bottom.

This is a pretty basic table, and the fact that it is so hard to mimic using CSS (yes you can come up with things that are some what like it if widths are known) makes me wonder why we should be so quick to abandon tables for CSS (save non-tabular data).

My question is still open to the public. Please prove me wrong.

Recently I've been looking at dispaly: (block, table, table-cell, table-row, inline, etc), but essentially all I would be doing is replacing <TABLE>,<TR>,and <TD> with <DIV> tags... But IE doesn't behave the same as firefox with these. This is not a very motivating solution.

the position: fixed, just mashed the block elements in the upper left hand corner. I couldn't get any configuration with this setting that would come close to the solution.

Thanks.

 

hmmm well i dont have tons of experience in tables...

im guessing you could define width: auto;
just a guess thought

CSS3 should bring alot of new elements to css, and further phase out table designs

 

You are best off sticking with tables for now. I know that "proper developers" all moan about "tables are for tabular data and nothing else" but I built my first site using a mixture of both. Then my second site I built fully with divs. All complete I uploaded my site (developed using firefox) and was happy as larry. Came into work where the only browser is IE. went on to my site and it resembled one of my pi55ed cooking experiences. After about 2 weeks of messing about getting it to look right in both I re wrote the whole site in tables. Okay so SERP's are apparently affected by a tabular layout but with how much it changes these days you never know whats gonna hit your serps. I say stick to tables and just ensure you have information packed pages and you'll do fine. When the browser manufacturers get there heads together and decide how to diplay stuff with CSS I may be pursuaded to change. MAYBE!!!!!!!!! I still use CSS for everything apart from layout check out the code at http://www.talkaboutfishing.co.uk


Thanks

 

Something to consider:

http://jp29.org/floatbox.htm

You can see this in action on my home page (sig below)

 

i need a little css help myself, trying to create a photo gallery that is already in a single column to show up in 2 columns instead, here is the page http://www.sheisbeautiful.com/beautiful as you can see, its a single column, how can i make it so its 2?

here is the css

#wpsr-breadcrumb { }

#wpsr-albumlist { }
#wpsr-albumlist ul { list-style-position: outside; list-style-type: none; margin: 0; padding: 0; text-indent: 0px; }
#wpsr-albumlist ul li:before { content: none; }
#wpsr-albumlist li { list-style-position: inside; list-style-type: none; margin:20px 0px 0px 0px; border:1px solid #DDDDDD; overflow:hidden; position:relative; }

.wpsr-albumcover { float:left; width:100px; margin-right:10px; padding:3px; background-color:#EEEEEE; border-right:1px solid #DDDDDD; }
.wpsr-albumdescription { overflow:hidden; padding:10px 10px 0px 0px; }
.wpsr-albumtitle { font-size: 15px; }
.wpsr-albumtext { padding: 5px 0px 0px 5px; }
.wpsr-albummeta { position:absolute; top:83px; left:115px; width:323px; text-align:right; font-size:10px; }

#wpsr-piclist { }
#wpsr-piclist ul { list-style-position: inside; list-style-type: none; margin:0; padding:0; text-indent: 0px; }
#wpsr-piclist ul li:before { content: none; }
#wpsr-piclist li { list-style-position: inside; list-style-type: none; float:left; padding:3px; margin:10px 4px 0px 0px; background-color: #EEEEEE; border:1px solid #DDDDDD; overflow:hidden; position:static; width: 100px; height: 100px; }

.wpsr-nocomments,
.wpsr-hascomments,
.wpsr-hascomment {	position:absolute; top:86px; left:86px; width:16px; height:16px; }
.wpsr-hascomments,
.wpsr-hascomment { background: url(comment.png) center left no-repeat; }

#wpsr-error { margin:50px 0px; padding:20px; background-color: #EEEEEE; border:1px solid #DDDDDD; text-align: center; }

#wpsr-picture { position: relative;	background-color: #EEEEEE; border: 1px solid #DDDDDD; line-height: 0px;	padding: 5px; margin: 0 auto; }
#wpsr-picture img { }

#wpsr-picture-container { margin:20px auto; }

#image-nav-overlay { position: absolute; top: 5px; left: 5px; margin: 0px; padding: 0px; z-index: 99; }
#image-nav-overlay a,
#image-nav-overlay a:link,
#image-nav-overlay a:visited { line-height: 0px; outline: none; }
#image-nav-prevoverlay,
#image-nav-nextoverlay { width: 49.9%; height: 100%; background: transparent url(blank.gif) no-repeat; /* HAX0R IE */ }
#image-nav-prevoverlay { float: left;	left: 0px; top: 0px; }
#image-nav-nextoverlay { float: right; right: 0px; top: 0px; }
#image-nav-prevoverlay:active,
#image-nav-prevoverlay:focus,
#image-nav-prevoverlay:hover { background: url(p_prev.png) center left no-repeat;	}
#image-nav-nextoverlay:active,
#image-nav-nextoverlay:focus,
#image-nav-nextoverlay:hover { background: url(p_next.png) center right no-repeat; }

.wpsr-caption { margin:20px 0px 0px 0px; text-align:right; }

.show-50 { -moz-opacity:.50; -ms-filter:”alpha(opacity=50)”; filter:alpha(opacity=50); opacity:.50; } 

.wpsr-navigation { float:right; width: 190px; text-align:right; }
.wpsr-navigation ul { list-style-position: inside; list-style-type: none; margin:5px 0px !important; padding:0 !important; text-indent: 0px !important; display:block !important; clear:both; }
.wpsr-navigation ul li:before { content: none; }
.wpsr-navigation li { list-style-position: inside; list-style-type: none; float:right; padding:3px !important; margin:0px 0px 0px 4px !important; background-color: #EEEEEE; border:1px solid #DDDDDD; overflow:hidden; width: 50px; height: 50px; }

Code (markup):

any help would be awesome, thanks guys

 

CSS layouts are easier to maintain long term. It's sometimes quicker to implement using tables though.

 

Here's a tool to make 2 column layout
http://www.pagecolumn.com/2_column_div_generator.htm

 

Why can you not have width constraints on the left element?