i thought height: 100%; for the 3 columns would work but i was wrong.
then i found this link:
<!-- m --><a class="postlink" href="http://www.moronicbajebus.com/playground/cssplay/equalcolumn/">http://www.moronicbajebus.com/playgroun ... ualcolumn/</a><!-- m -->
but i am confused by it and it does not work in IE6, does anyone know how to create 3 columns in CSS that are the same length?
thanks
this is the site i am trying to do it with
<!-- m --><a class="postlink" href="http://www.sbertalotto.com/midi_delight/You">http://www.sbertalotto.com/midi_delight/You</a><!-- m --> do realize you can use css WITH tables..
#table1 {width:100%; border:0px}
#table1 #column1 {width:33%; height:200px}
#table1 #column2 {width:33%; height:200px}
#table1 #column3 {width:33%; height:200px}
<table id="table1" cellpadding="0" cellspacing="0">
<tr>
<td id="column1">blah blah</td>
<td id="column2">blah blah</td>
<td id="column3">blah blah</td>
</tr>
</table>
I use tables all the time, because CSS and the browsers don't always match up. It's the browser wars thing all over again.
I say go ahead and use tables.
That's my story and I'm stickin' to it.
Skip Townedont use tables for your layout as mentioned above. You can achieve the allusion of same length columns by using Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->)
that should do it for you
Hi there,
I am building my CSS layout site for the first time and have a similar problem. May I kindly have your advice on the following dilemma?
I've built the Web site <!-- m --><a class="postlink" href="http://www.webhosting-faqs.com/">http://www.webhosting-faqs.com/</a><!-- m --> using CSS fluid columns. I used two background images - one for the body, and another for the right column. The background image for the body (the yellow column on the left) is fine as it stretches all the way down a page. However, for my right column, the background only stretches as far as the content there. How do I get the right column to cover the entire page? I can't use the hack from alistapart because that only works for fixed width columns (and not fluid ones like mine). I've also tried using height:100% on my right column.
Thank you in advance.
---
Below is my CSS coding:
body {
margin: 0px 0px 0px 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background:url(../images/bg_left.jpg) repeat-y left #fff;
}
#leftcontent {
padding: 10px 17px 10px 7px;
position: absolute;
left:0px;
top:0px;
width:155px;
}
#centrecontent {
margin-left: 179px;
margin-right:169px;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 181px;
margin-right:171px;
padding:10px 30px 30px 5px;
}
html>body #centrecontent {
margin-left: 181px;
margin-right:171px;
}
#rightcontent {
position: absolute;
right:0px;
top:0px;
width:170px;
padding:10px 10px 10px 20px;
background:url(../images/bg_right.jpg) repeat-y left;
font-size:11px;
border-bottom: 1px solid #fff;
height: 100%;
}
then i found this link:
<!-- m --><a class="postlink" href="http://www.moronicbajebus.com/playground/cssplay/equalcolumn/">http://www.moronicbajebus.com/playgroun ... ualcolumn/</a><!-- m -->
but i am confused by it and it does not work in IE6, does anyone know how to create 3 columns in CSS that are the same length?
thanks
this is the site i am trying to do it with
<!-- m --><a class="postlink" href="http://www.sbertalotto.com/midi_delight/You">http://www.sbertalotto.com/midi_delight/You</a><!-- m --> do realize you can use css WITH tables..
#table1 {width:100%; border:0px}
#table1 #column1 {width:33%; height:200px}
#table1 #column2 {width:33%; height:200px}
#table1 #column3 {width:33%; height:200px}
<table id="table1" cellpadding="0" cellspacing="0">
<tr>
<td id="column1">blah blah</td>
<td id="column2">blah blah</td>
<td id="column3">blah blah</td>
</tr>
</table>
I use tables all the time, because CSS and the browsers don't always match up. It's the browser wars thing all over again.
I say go ahead and use tables.
That's my story and I'm stickin' to it.
Skip Townedont use tables for your layout as mentioned above. You can achieve the allusion of same length columns by using Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->)
that should do it for you
Hi there,I am building my CSS layout site for the first time and have a similar problem. May I kindly have your advice on the following dilemma?
I've built the Web site <!-- m --><a class="postlink" href="http://www.webhosting-faqs.com/">http://www.webhosting-faqs.com/</a><!-- m --> using CSS fluid columns. I used two background images - one for the body, and another for the right column. The background image for the body (the yellow column on the left) is fine as it stretches all the way down a page. However, for my right column, the background only stretches as far as the content there. How do I get the right column to cover the entire page? I can't use the hack from alistapart because that only works for fixed width columns (and not fluid ones like mine). I've also tried using height:100% on my right column.
Thank you in advance.
---
Below is my CSS coding:
body {
margin: 0px 0px 0px 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background:url(../images/bg_left.jpg) repeat-y left #fff;
}
#leftcontent {
padding: 10px 17px 10px 7px;
position: absolute;
left:0px;
top:0px;
width:155px;
}
#centrecontent {
margin-left: 179px;
margin-right:169px;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 181px;
margin-right:171px;
padding:10px 30px 30px 5px;
}
html>body #centrecontent {
margin-left: 181px;
margin-right:171px;
}
#rightcontent {
position: absolute;
right:0px;
top:0px;
width:170px;
padding:10px 10px 10px 20px;
background:url(../images/bg_right.jpg) repeat-y left;
font-size:11px;
border-bottom: 1px solid #fff;
height: 100%;
}