please help convert tables to CSS

jasonc · February 22, 2008

i have this last piece of code to convert, please can someone tell me the correct way to code this in CSS.

thank you

#index-container {
border: 1px solid #fff;
background: #507bcd;
}

#index-content {
margin: 8px;
}

<table width="319" align="center" style="border-collapse:collapse;">
  <tr>
    <td width="311" height="126" valign="top" bgcolor="#000000">
      <table width="100%" cellpadding="8" style="border-collapse:collapse;">
        <tr>
          <td valign="top">
              <div align="center" id="index-container">
                    <div>a</div>
              </div>
           </td>
          <td rowspan="3" valign="top" nowrap>b</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

AndyB · February 23, 2008

i have this last piece of code to convert, please can someone tell me the correct way to code this in CSS.

thank you

That rather depends on what you're trying to do - which isn't obvious from the html you posted. If the intent was to display tabular data, then a table is the right way to code it.

phpQ6 · February 23, 2008

You can also use a table for your layout; isn't that right AndyB.

Anyway; jasonc - you should look into the CSS "Display" property; that should help you out some what with your question.

dbrimlow · February 23, 2008

Actually, this was a fun little experiment for me this morning which turned out to be a major breakthrough in my liquid scalable layout experimentation.

I was able to replicate it as a completely flexible and liquid layout (which I have been heavily researching).

It will resize according to the window and will not blow up - I got it down to a 104px wide viewport (the smallest FF would go!) and it validates as html 4.01 strict.

I've never been able to make a 100% totally scalable layout before; but I didn't think it was even possible to get THAT small and still remain nearly 100% intact.

This is very cool.

Try it yourselves (to see the scalability of both floated boxes, change the font color of .rightcell to color:#fff):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {background:#fff; margin:1% 33%; font-size:100%; }
#box {width:100%;background:#000; color:#fff; height:200px}
.content {width:45%;text-align:center; margin:1%;padding:1%;float:left}
.leftcell {
float:left;
color:#fff;
display:block;
border: 1px solid #fff;
background: #507bcd;
width:100%;
padding:.1% 
}
.rightcell {
float:right;
color:#000;
display:block;
border: 1px solid #000;
background: #000;
width:100%;
padding:.1% 
}
-->
</style>
<!--[if lt ie 7]><style type="text/css">.content {width:44%}</style><![endif]-->
</head>
<body>
<div id="box">
  <div class="content">
         <p class="leftcell">a</p>
  </div>
  <div class="content">
         <p class="rightcell">b</p>
</div>
</div>
</body>
</html>

The key to the true scalability was to use percentage (or ems) for margins/paddings - as well as for all other font or positioning dimensions - instead of px.

You can even change the fixed heights I used to scalable as well:

Replace #box "height:200px" with "line-height:15em"

Then add "line-height:1em" to both .leftcell and .rightcell.

This worked in FF and IE 6.0 (win 2k) -

I am extremely curious (anxious) to know if it works in other browsers/platforms - IE 7, Opera, safari/mac, FF/ubuntu, Netscape, etc.

If it does, I've finally found (for me) the path to the layout holy grail ... and most likely have at least a year of frustration ahead of me trying to make intricate web pages scalable using this formula.

bronzemonkey · February 24, 2008

Actually, this was a fun little experiment for me this morning which turned out to be a major breakthrough in my liquid scalable layout experimentation.

I don't get why you've coded it that way, especially the margins on the body, when the same thing can be done using the standard way of coding liquid layouts. It also has the advantage of being adaptable to an elastic layout - whole site scales in proportion to text-size, doesn't expand beyond browser window, will behave as liquid when browser window is reduced - in modern browsers (and just scalable in lte IE6) by changing just one line of code.

Perhaps I missed something. Have a look at the code below and tell me if what you've posted above has any additional benefits.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Liquid and Elastic Layouts</title>
<style type="text/css">
/*reset*/
html, body, div, p {padding:0; border:0; margin:0; font-size:100.01%;}
body {font-family:arial, sans-serif; color:#000; background:#fff;}
p {margin:1em 0;}

/*layout*/
#wrapper {width:50%; margin:0 auto; background:#ddd;} /* for elastic layout replace width with max-width:50em */
#priCont {float:left; width:49%; background:#bbb; overflow:hidden;}
#secCont {float:right; width:49%; background:#999; overflow:hidden;}

/*clearing*/
#wrapper:after {clear:both; display:block; content:"."; height:0; font-size:0; line-height:0; visibility:hidden;}
</style>

<!--[if lte IE 6]>
<style type="text/css">
/* when using an elastic layout in the master css:
either uncomment the line below to enable a scalable layout
or leave it commented if you want the lte IE6 layout to remain liquid */
/* #wrapper {width:50em;} */
#wrapper {height:1px;}
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css">
#wrapper {min-height:1px;}
</style>
<![endif]-->

</head>
<body>

<div id="wrapper">

	<div id="priCont">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris accumsan tristique eros. Nullam cursus odio eget lorem. Praesent malesuada mollis ante. Sed ut libero. Integer fermentum sem in enim. In sed lorem nec nibh iaculis luctus. Donec et turpis eget dolor rhoncus aliquam. In hac habitasse platea dictumst. Duis luctus mauris sed sem. Suspendisse purus est, varius eu, imperdiet in, laoreet vitae, lorem. Curabitur pulvinar mollis dolor. Donec et nisi. Mauris tempor, mauris et euismod rutrum, mauris erat sagittis lorem, eu tempus nisi ligula vel risus. Integer massa arcu, sollicitudin eget, interdum at, ornare rutrum, arcu. Pellentesque nibh. Phasellus arcu purus, porta nec, faucibus ut, laoreet sed, orci. Praesent nisl. Curabitur orci quam, egestas sit amet, rhoncus ac, vestibulum eu, nisl. Fusce vulputate tempor ligula.</p>
		<p>Nullam placerat. Praesent feugiat pretium lacus. Etiam commodo. Donec metus. Proin sit amet justo non tortor sodales dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tortor. Aliquam eros. Pellentesque accumsan vestibulum erat. Fusce condimentum ante ac ipsum. Pellentesque sed enim. Ut non metus. Nulla vel leo in nulla venenatis congue. Nulla et nibh. Maecenas est dui, blandit sed, ultrices a, hendrerit eu, lorem. Cras eget enim quis metus sodales vestibulum. Proin laoreet nulla interdum urna.</p>
	</div>

	<div id="secCont">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris accumsan tristique eros. Nullam cursus odio eget lorem. Praesent malesuada mollis ante. Sed ut libero. Integer fermentum sem in enim. In sed lorem nec nibh iaculis luctus. Donec et turpis eget dolor rhoncus aliquam. In hac habitasse platea dictumst. Duis luctus mauris sed sem. Suspendisse purus est, varius eu, imperdiet in, laoreet vitae, lorem. Curabitur pulvinar mollis dolor. Donec et nisi. Mauris tempor, mauris et euismod rutrum, mauris erat sagittis lorem, eu tempus nisi ligula vel risus. Integer massa arcu, sollicitudin eget, interdum at, ornare rutrum, arcu. Pellentesque nibh. Phasellus arcu purus, porta nec, faucibus ut, laoreet sed, orci. Praesent nisl. Curabitur orci quam, egestas sit amet, rhoncus ac, vestibulum eu, nisl. Fusce vulputate tempor ligula.</p>
		<p>Nullam placerat. Praesent feugiat pretium lacus. Etiam commodo. Donec metus. Proin sit amet justo non tortor sodales dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tortor. Aliquam eros. Pellentesque accumsan vestibulum erat. Fusce condimentum ante ac ipsum. Pellentesque sed enim. Ut non metus. Nulla vel leo in nulla venenatis congue. Nulla et nibh. Maecenas est dui, blandit sed, ultrices a, hendrerit eu, lorem. Cras eget enim quis metus sodales vestibulum. Proin laoreet nulla interdum urna.</p>
	</div>
   
  </div>
  
</body>
</html>

dbrimlow · February 24, 2008

At first what I was attempting with my version was to just come as close as I could to just emulating jasonc's table ... a simple css table conversion using px and fixed widths/heights.

But then I decided to get into the liquidity of it. Using margins for the body was just a momentary expedient. I would convert it to a page container when placing other elements on the page.

However, when using the standard way the column borders and padding for the left/right floats didn't remain relational (forcing the right float to drop down upon minimizing) and it doesn't maintain the text elasticity very well (they bled into the borders).

Also using display block in the floats seems to contain the text better - which really doesn't make much sense to me yet why that should work.

Oh, you reminded me of the ol' "be kind to opera" rule of using 100.01% for the body width and font-size, but then scaling down the wrap to 99.6%.

I initially didn't play with it beyond emulating the table.

But here is a modified version that I played with just now adding full text for all elements (I didn't bother modifying the conditional comment for IE and clearing the floats, though, so it, so it will blow up in IE):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {width:100.01%; font-size:100.01%}
#wrap {background:#fff; margin:1% 30%}
#box {background:#000; color:#fff; line-height:10em}
#box p {line-height:1em;text-align:center}
.content {width:45%; margin:1%;padding:1%;float:left;}
.leftcell {
float:left;
color:#fff;
border: 1px solid #fff;
background: #507bcd;
width:100%;
padding:.1%;
line-height:1em
}
.rightcell {
float:right;
color:#fff;
border: 1px solid #fff;
background: #507bcd;
width:100%;
padding:.1% 0 .1% .1% ;
line-height:1em
}
-->
</style>
<!--[if lt ie 7]><style type="text/css">.content {width:43%}</style><![endif]-->
</head>

<body>
<div id="wrap">
<div id="box">
  <div class="content">
<p class="leftcell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris accumsan tristique eros. Nullam cursus 

odio eget lorem. Praesent malesuada mollis ante. Sed ut libero. Integer fermentum sem in enim. In sed lorem nec nibh iaculis 

luctus. Donec et turpis eget dolor rhoncus aliquam. In hac habitasse platea dictumst. Duis luctus mauris sed sem. Suspendisse 

purus est, varius eu, imperdiet in, laoreet vitae, lorem. Curabitur pulvinar mollis dolor. Donec et nisi. Mauris tempor, 

mauris et euismod rutrum, mauris erat sagittis lorem, eu tempus nisi ligula vel risus. Integer massa arcu, sollicitudin eget, 

interdum at, ornare rutrum, arcu. Pellentesque nibh. Phasellus arcu purus, porta nec, faucibus ut, laoreet sed, orci. 

Praesent nisl. Curabitur orci quam, egestas sit amet, rhoncus ac, vestibulum eu, nisl. Fusce vulputate tempor ligula.</p>
  </div>
  <div class="content">
  <p class="rightcell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris accumsan tristique eros. Nullam 

cursus odio eget lorem. Praesent malesuada mollis ante. Sed ut libero. Integer fermentum sem in enim. In sed lorem nec nibh 

iaculis luctus. Donec et turpis eget dolor rhoncus aliquam. In hac habitasse platea dictumst. Duis luctus mauris sed sem. 

Suspendisse purus est, varius eu, imperdiet in, laoreet vitae, lorem. Curabitur pulvinar mollis dolor. Donec et nisi. Mauris 

tempor, mauris et euismod rutrum, mauris erat sagittis lorem, eu tempus nisi ligula vel risus. Integer massa arcu, 

sollicitudin eget, interdum at, ornare rutrum, arcu. Pellentesque nibh. Phasellus arcu purus, porta nec, faucibus ut, laoreet 

sed, orci. Praesent nisl. Curabitur orci quam, egestas sit amet, rhoncus ac, vestibulum eu, nisl. Fusce vulputate tempor 

ligula.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris accumsan tristique eros. Nullam cursus odio eget lorem. 

Praesent malesuada mollis ante. Sed ut libero. Integer fermentum sem in enim. In sed lorem nec nibh iaculis luctus. Donec et 

turpis eget dolor rhoncus aliquam. In hac habitasse platea dictumst. Duis luctus mauris sed sem. Suspendisse purus est, 

varius eu, imperdiet in, laoreet vitae, lorem. Curabitur pulvinar mollis dolor. Donec et nisi. Mauris tempor, mauris et 

euismod rutrum, mauris erat sagittis lorem, eu tempus nisi ligula vel risus. Integer massa arcu, sollicitudin eget, interdum 

at, ornare rutrum, arcu. Pellentesque nibh. Phasellus arcu purus, porta nec, faucibus ut, laoreet sed, orci. Praesent nisl. 

Curabitur orci quam, egestas sit amet, rhoncus ac, vestibulum eu, nisl. Fusce vulputate tempor ligula.</p>
</div>
</div>
</body>
</html>

dbrimlow · February 24, 2008

Oh yeah, again, the point why I did it the way I did was to emulate the table as closely as possible without using fixed widths or heights.

Looking at it in a fresh light, it was a limited solution because I can see some potential specificity issues in the box element if I want to start modifying paragraphs with classes. But I can also see how to work around that.

For me, this was a breakthrough in true liquidity beyond the standard techniques (which don't overcome certain specific issues with boxes in the types of sites I generally code for).

bronzemonkey · February 24, 2008

I don't understand what you are saying is wrong with the current liquid/elastic layouts? To me, your code looks like it does exactly the same thing but slightly less efficiently.

dbrimlow · February 28, 2008

Actually, turns out you're right, N (no surprise).

It was a "false/positive" (that gave me momentary but ultimately futile hope). I've been playing with it all week and I can't get it to be stable - and ended up going back to the "Bulletproof web - second edition" technique as a starting point.

I WILL solve the liquid height issue somehow!

Sign In

please help convert tables to CSS

Recommended Posts

jasonc

Link to comment

Share on other sites

AndyB

Link to comment

Share on other sites

phpQ6

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

bronzemonkey

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

bronzemonkey

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information