CSS - Table Row Background Color

I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information.

I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what).

URL

The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background.

Could someone solve this, or alternatively reccommend another way.

Hey Guys!

I'm going absolutely bonkers trying to find out how to change the color of the background of a certain element on my site. I installed Vanilla forums on my site and am trying to customize the css script.

If you look at the page, you will see an annoying white in the body. I am trying to make the background of that #F6F6F2. Could you guys possibly put me in the right direction?

Thanks!

Here is a link to my page:
shipswatchdotcom/forum/vanilla/aaa.html

Here is the css script:
Code:

#Body {
	margin: 0;
	width: 99.9%;
	position: relative;
	background: #F6F6F2;

}
#Head {
	background: #B8D4B8;
	padding:0;
	margin: 20px 20px 0;
	text-align: left;
	position: relative;
}
div.Popup h1,
div.Popup h2,
div.Connect h1,
div.Connect h2 {
	background: #F6F6F2;
	border-bottom: 1px solid #3b5998;
}
.Banner {
	padding: 10px;
	text-align: left;
	position: relative;
	background: #F6F6F2;
}
.Banner ul {
	background: #B8D4B8;
	padding: 0;
	margin: 0;
}
.Banner ul li {
	display: inline;
	padding: 0;
	margin: 0;
}
.Banner ul li a {
	font-weight: bold;
	padding: 3px 6px;
	font-size: 11px;
	color: #336633;
	display: inline-block;
}
.Banner ul li a:hover {
	background: #E5F0E5;
}
.Banner ul li a.SignOut {
	font-weight: normal;
	position: absolute;
	top: 10px;
	right: 10px;
}
.Banner ul li a span {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	padding: 1px 2px 0 1px;
	background: #F6F6F2;
	border-right: 1px solid #F6F6F2;
	border-bottom: 1px solid #F6F6F2;
	color: #F6F6F2;
	font-size: 9px;
	position: relative;
	top: -3px;
}
#Content {
	float: none;
	width: auto;
	margin: 0 280px 0 10px;
	background: #F6F6F2;
}
#Panel {
	float: right;
	margin-right: 10px;
	background: #F6F6F2;
}
#Panel div.SearchBox input.InputBox {
	width: 200px;
	margin-right: 4px;
	background: #F6F6F2;
}
div.SearchBox {
	margin-bottom: 6px;
}
body.Profile div.SearchBox {
	display: none;
}
body.Profile #Content {
	float:none;
	width: auto;
	margin: 0 10px 0 280px;
	background: #F6F6F2;
}
body.Profile #Panel {
	margin: 0 0 0 10px;
	background: #F6F6F2;
}
form.Activity textarea {
	width:99%;
	background: #F6F6F2;
}
#Foot div {
	width: auto;
	background: #F6F6F2;
}
body.Post #Content {
	width: auto;
	margin:0 20px;
	background: #F6F6F2;
}
#ConversationForm textarea.MultiComplete,
#ConversationForm .TextBox,
#MessageForm textarea,
div.Comment div.CommentForm,
div.Comment div.CommentForm textarea,
div.CommentForm textarea,
#DiscussionForm input.InputBox,
#DiscussionForm textarea {
	width:99%;
	background: #F6F6F2;
}
#ConversationForm form {
	border: none;
}
div.Preview div.Message,
ul.MessageList div.Message {
	clear: none;
}
#DiscussionForm form {
	background: #F6F6F2;
	border: 1px solid #ccc;
}
div.MessageForm,
div.Tabs {
	background: #F6F6F2;
	border-bottom:1px solid #ccc;
}

/* Tabs */
div.Tabs {
	background: #F6F6F2;
	padding: 0;
	border-bottom: 1px solid #aaa;
}
div.Tabs ul {
	padding: 0 8px;
	white-space: nowrap;
}
div.MessageForm {
	padding: 8px 8px 5px;
}
div.MessageForm div.Tabs {
	padding: 0 8px;
}
div.Tabs li a,
div.Tabs li a:link,
div.Tabs li a:hover,
div.Tabs li a:active,
div.Tabs li a:visited {
	font-size: 11px;
   margin: 0;
   border: none;
   border-radius: 0;
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   background: #F6F6F2;
   color: #336633;
   text-decoration: none;
   padding: 8px 10px;
	line-height: 11px;
}
div.Tabs li a:hover {
   text-decoration: underline;
}
a.Active,
div.Tabs li.Active a {
   background: #F6F6F2;
   color: #336633;
   margin: 0;
   border: 1px solid #aaa;
	border-bottom: none;
   border-radius: 3px 3px 0 0;
   -moz-border-radius: 3px 3px 0 0;
   -webkit-border-radius: 3px 3px 0 0;
   display: inline-block;
	font-size: 12px;
	line-height: 12px;
   font-weight: bold;
   text-decoration: none;
   padding: 6px 10px;
	position: relative;
	top: 1px;
}
div.Tabs li a span {
   line-height: 1;
   font-size: 80%;
   padding: 0 3px;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   font-weight: normal;
	background: #F6F6F2;
   color: #4A7023;
   margin: 0 0 0 4px;
}
div.DiscussionsTabs div.SubTab {
	font-size: 11px;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-top: 1px solid #aaa;
	background: #F6F6F2;
	margin:0;
	padding:4px 8px;
}
div.HeadingTabs ul {
	margin: 8px 0 0;
}
body.Discussion a.Bookmark {
	margin: 6px 2px;
}
div.Preview {
	border: 1px solid #aaa;
	background: #F6F6F2;
	margin:0 0 8px;
	padding: 8px;
}
.Foot {
	background: #F6F6F2;
	border: none;
}
div.MorePager a,
div.MorePager a:link,
div.MorePager a:visited,
div.MorePager a:active,
div.MorePager a:hover {
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	background: #F6F6F2;
	border: none;
	color: #4A7023;
	line-height: 1;
	padding: 0;
	text-decoration: none;	
}
div.MorePager a:hover {
	color: #4A7023;
	text-decoration: underline;
}
body.add #Content {
	margin: 0 10px;
	background: #F6F6F2;
}

/* Panel Boxes */
#Panel div.Box {
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	background: #F6F6F2;
	padding: 0;
}
div.Box h4 {
	color: #4A7023;
}
ul.PanelActivity,
ul.PanelInfo {
	border-top:1px solid #ccc;
}
ul.PanelActivity li,
ul.PanelInfo li,
ul.PanelInfo li.Active {
	background: #F6F6F2;
	border-bottom: 1px solid #ccc;
}
ul.PanelInfo li.Active {
	background: #F6F6F2;
}
#Status {
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	background: #eee;
	color: #000;
	line-height: 1.6;
	padding: 3px 6px;
	margin: 0 0 8px;
}
body.Profile ul.PanelInfo {
	border: #F6F6F2;
}
body.Profile ul.PanelInfo li {
	margin: 0;
	padding: 0;
}
body.Profile ul.PanelInfo li a {
	font-size: 12px;
	display: block;
	padding: 0 6px;
	background: #F6F6F2;
}
body.Profile ul.PanelInfo li a:hover {
	background: #F6F6F2;
}

/* Sign In Page */
body.Entry #Content {
	text-align: center;
	margin: 0 auto !important;
}
body.Entry #Content div.Box {
	background: #F6F6F2;
	border: 0;
}
div.Methods {
	border-left: 1px solid #ccc;
}

/* Messages */
div.DismissMessage {
	background: #F6F6F2;
	border: 1px solid #ccc;
	padding:6px 8px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
div.DismissMessage a.Dismiss:hover {
	color: #000;
}
div.Warning {
	background: #d00;
	border: 1px solid #b00;
	color: #F6F6F2;
	text-shadow: 1px 1px 1px #444;
}
div.Warning a.Dismiss {
	color: #F6F6F2;
}
#Content div.Box {
	color: #000;
	background: #F6F6F2;
	border: 1px solid #F6F6F2;
}
body#dashboard_entrycontroller_signin div.Box {
	border: none;
}
/* Autocomplete */
.ac_results {
   border: 1px solid #d7d8da;
	color: #000;
   border-top: 0;
   background-color: #F6F6F2;
}
.ac_results li {
   border-bottom: 1px solid #d7d8da;
}
.ac_lastitem {
   border-bottom: 0 !important;
}
.ac_results strong {
   background: #F6F6F2;
}
.ac_over strong {
   background: #F6F6F2;
}
.ac_over {
   background: #3b5998;
   color: #fff;

}

Hi,

I am trying to apply a background color to an item other than the body but I cannot make it display in IE 6 or 5.5. I have tried applying it to both <div>'s and <p>'s. Does IE not support the background-color property outside of the page background?

Hi,

I have made a page using <div> tags.

<div id="page">
<div id="leftmenu">
</div>
<div id="mainarea">
</div>
</div>

My problem is that sometimes, the leftmenu is longer than the main area(1) and sometimes its the opposite- the main area is longer than the leftmenu(2). I want them both to be of the same height. (3)

How can I do this? Plz Help!

I have pasted the style codes for the 3 tags below.


(1)


(2)



(3)

#mainarea {
background-color:#FFFFFF;
float:left;
position:relative;
right:0pt;
width:630px;
}

#leftmenu {
background-color:#EEEEEE;
float:left;
left:0pt;
position:relative;
width:140px;
}

#page {
background-color:#FFFFFF;
position:relative;
width:770px;
}

i wanted usersto choose their own style sheet by giving them different links like red, green, blue which will take them to different layouts or background color page. the problem was that worked only for that particular page but if they click on any link or menu from that page it will take them back to the default color.
is there any way that i can set so that their choice will stay throught their surfing ?
any thoughts ?

hanks

Having an issue with the background color in a div.

The color shows up in I.E. but not in Firefox.

I have a div with a width of 100%. Inside the div is an unordered list with two list items.

Here is the css:

div#nav {
width: 100%;
margin: 0;
background-color: #EAE9E4;
}

#nav ul {margin: 0; padding: 0; }

#nav li {
list-style: none;
float: left;
margin: 0;
padding: 0;
width: 15%;
font-size: 11px;
line-height: 20px;
white-space: nowrap;
}

Essentially this will be a navigation aid below the banner of the webpage. The list items will contain anchors which will appear as "buttons". The containing div extends to the end and I want it to have a background color.

Any help appreciated.

Hi there people,

I have a question about CSS but before I start off asking this question I'll introduce myself.

I'm a new user of this great forum, my name is Dwight and I'm a student on the "Graphical Lyceum Amsterdam" where I follow the education for "Multimedia Designer".

Ok so now you know me a little, I'll start off asking my question.

Question: I have to change the layout for a html page that askes for information from different asp pages, but that's not my problem . The problem is that I have to make some td's a different color -the background that is- but the problem is that I can't change the html page itself (it is automaticly generated and I don't have permission to change it).
So my question is can someone tell me how I can change the color of some (not all!) td's with CSS without making classes?

Tnx, Dwight

Hi all,

I haven't been working with CSS that long and I've searched for a fix but couldn't get anything to work. I can't get a background color to display in Firefox but it does in IE. Inside my "mainwrap" I have two columns and for some reason when I set my background to white for the "mainwrap" it just doesn't show up in Firefox.

Here's xhtml code:
xhtml Code:
Original - xhtml Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="toparea"> <div id="header"></div> <!--end header--> <div id="menuarea"> <div id="menubox"> </div> <!--end menubox--> </div> <!-- end menuarea--> </div> <!--end toparea--> <div id="middlearea"> <div id="mainwrap"> <div id="topwrap"></div> <!--end topwrap--> <div id="leftcolumn"> <div id="content"></div> <!--end content--> <div id="recentwork"></div> <!--end webwork--> </div><!--end leftcolumn--> <div id="rightcolumn"></div> <!--end rightcolumn--> <div id="bottomwrap"></div> <!--end bottomwrap--> </div> <!--end mainwrap--> </div> <!--end middlearea--> <div id="bottomarea"></div> <!--end bottomarea--> </body> </html>

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="toparea">

<div id="header"></div> <!--end header-->

<div id="menuarea">
<div id="menubox">
</div> <!--end menubox-->
</div> <!-- end menuarea-->

</div> <!--end toparea-->

<div id="middlearea">

<div id="mainwrap">

<div id="topwrap"></div> <!--end topwrap-->

<div id="leftcolumn">

<div id="content"></div> <!--end content-->

<div id="recentwork"></div> <!--end webwork-->

</div><!--end leftcolumn-->

<div id="rightcolumn"></div> <!--end rightcolumn-->

<div id="bottomwrap"></div> <!--end bottomwrap-->

</div> <!--end mainwrap-->
</div> <!--end middlearea-->

<div id="bottomarea"></div> <!--end bottomarea-->

</body>
</html>

Heres the CSS:

css Code:
Original - css Code /* CSS Document */ body { background-image: url(../images/bottombg.jpg); background-repeat: repeat; font-family: Tahoma, sans-serif; margin: 0; } /* Begin top area */ div#toparea { width: 100%; height: 128px; background-image: url(../images/topareabg.jpg); background-position: top; background-repeat: repeat-x; float: left; } div#header { width: 800px; height: 100px; background-image: url(../images/headerbg.jpg); margin-left: auto; margin-right: auto; } div#logo { float: left; margin-top: 25px; margin-left: 5px; } div#tagline { margin-top: 37px; margin-left: 5px; float: left; } div#menuarea { width: 800px; height: 25px; margin-left: auto; margin-right: auto; } div#menubox { float: right; } .buttonbox { float: left; } .buttonbox img { border: none; } /* Begin middle area */ div#middlearea { width: 100%; background-image: url(../images/middleareabg.jpg); background-repeat: repeat; float: left; } div#mainwrap { width: 800px; margin-left: auto; margin-right: auto; background-color: #FFFFFF; } div#topwrap { width: 800px; height: 20px; background-image: url(../images/topNavbg.jpg); float: left; } div#leftcolumn { width: 550px; background-color: #FFF; float: left; } div#content { width: 500px; margin-left: 10px; margin-top: 10px; } div#content p { font-family: Tahoma, Arial, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 15px; } div#recentwork { width: 540px; height: 250px; background-color: #666666; margin-left: 10px; } div#rightcolumn { width: 250px; background-color: #FFF; float: left; } div#bottomwrap { width: 800px; height: 25px; background-image: url(../images/bottombgNav.jpg); float: left; } /* Begin bottom area */ div#bottomarea { width: 100%; height: 200px; background-image: url(../images/bottombg.jpg); background-repeat: repeat; float: left; } /* Text styles */ h1 { font: 100 normal 22px/normal Tahoma, Arial, sans-serif; text-transform: none; color: #999999; } .tagline { font-family: Tahoma, Arial, sans-serif; font-size: 12px; color: #999; }

  

 /* CSS Document */


 body {


     background-image: url(../images/bottombg.jpg);


     background-repeat: repeat;


     font-family: Tahoma, sans-serif;


     margin: 0;


 }


  


 /* Begin top area */


  


 div#toparea {


     width: 100%;


     height: 128px;


     background-image: url(../images/topareabg.jpg);


     background-position: top;


     background-repeat: repeat-x;


     float: left;


 }


  


 div#header {


     width: 800px;


     height: 100px;


     background-image: url(../images/headerbg.jpg);


     margin-left: auto;


     margin-right: auto;


 }


  


 div#logo {


     float: left;


     margin-top: 25px;


     margin-left: 5px;


 }


  


 div#tagline {


     margin-top: 37px;


     margin-left: 5px;


     float: left;


 }


  


 div#menuarea {


     width: 800px;


     height: 25px;


     margin-left: auto;


     margin-right: auto;


 }


  


 div#menubox {


     float: right;


 }


  


 .buttonbox {


     float: left;


 }


  


 .buttonbox img {


     border: none;


 }


  


 /* Begin middle area */


  


 div#middlearea {


     width: 100%;


     background-image: url(../images/middleareabg.jpg);


     background-repeat: repeat;


     float: left;


 }


  


 div#mainwrap {


     width: 800px;  


     margin-left: auto;


     margin-right: auto;


     background-color: #FFFFFF;


 }


  


 div#topwrap {


     width: 800px;


     height: 20px;


     background-image: url(../images/topNavbg.jpg);


     float: left;


 }


  


 div#leftcolumn {


     width: 550px;


     background-color: #FFF;


     float: left;


 }


  


 div#content {


     width: 500px;


     margin-left: 10px;


     margin-top: 10px;


 }


  


 div#content p {


     font-family: Tahoma, Arial, sans-serif;


     font-size: 13px;


     line-height: 20px;


     margin-bottom: 15px;


 }


  


 div#recentwork {


     width: 540px;


     height: 250px;


     background-color: #666666;


     margin-left: 10px;


 }


  


 div#rightcolumn {


     width: 250px;


     background-color: #FFF;


     float: left;


 }


  


 div#bottomwrap {


     width: 800px;


     height: 25px;


     background-image: url(../images/bottombgNav.jpg);


     float: left;


 }


  


 /* Begin bottom area */


  


 div#bottomarea {


     width: 100%;


     height: 200px;


     background-image: url(../images/bottombg.jpg);


     background-repeat: repeat;


     float: left;


 }


  


 /* Text styles */


  


 h1 {


     font: 100 normal 22px/normal Tahoma, Arial, sans-serif;


     text-transform: none;


     color: #999999;


 }


  


 .tagline {


     font-family: Tahoma, Arial, sans-serif;


     font-size: 12px;


     color: #999;


 } 

Thanks for your time!

i have a problem dynamically setting the html background color when i initially set it with css.

if i have a javascript function:

function changeColor()
{
document.bgColor = '#FFFF00';
}

and call it when i click a button the background color changes like you'd expect.

but if i initialize the background color like this:

body{background-color: #FF0000;}

and then later call my javascript function to change the background color like before, it doesn't do anything.

what's going on here? and how can i initialize the background color and still be able to dynamically change it?

thanks

I have a horizontal ul:

Code:

<ul>
<li>blah</li>
<li>loooooooooooooooooooooong blah blah blah</li>
</ul>

If I set the background color:
Code:

li { background-color: yellow; }

It works fine, but If the long line gets wrapped, the height of the background of that li is higher, and it looks very funny. I want the background to be equally height, independent on the other li:s height.

Is that possible? I don't want to have a fixed value for the height

Howdy,

Okay, this is driving me nuts...i have the background-color set the same for the header and the footer, only the header is displaying darker than the footer. I've been going over it with a fine-toothed comb, but can't find the problem.

here's the site and here's the css;

Code:

/* Graphix Plus V 4.0 Styles */

h1 {
font-family:arial;
font-size:16px;
font-color:#006696;
font-weight:bold;
}

h2 {
font-family:arial;
font-size:14px;
font-color:#006696;
font-weight:bold;
}

body {
padding:0px;
margin-top:0px;
background-image:url(images/bground-pattern.gif);
background-color:#FFFFFF;
font-family:arial;
font-size:12px;
color:black;
text-decoration:none;
text-align:left;
border: 1px solid #E5E5E5;
}

.contentarea {
background-color:#FFFFFF;
padding:6px;
border: 1px solid #E5E5E5;
}

.flankers {
background-color:#C6C6C6;
padding:4px;
border: 1px solid #E5E5E5;
}

.header {
background-color:#006696;
padding:4px;
background-image:url(images/gp_v4_header.gif);
background-position:top left;
background-repeat:no-repeat;
}

a.mainnav:link {
font-family:arial;
font-size:12px;
color:black;
text-decoration:underline;
}

a.mainnav:visited {
font-family:arial;
font-size:12px;
color:black;
text-decoration:underline;
}

a.mainnav:hover {
font-family:arial;
font-size:12px;
color:#006696;
text-decoration:underline;
}

/* MAIN MENU LIST STYLE BEGINS - UL class = 'NAV'*/
ul#nav, ul#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    border-bottom: 1px solid #E5E5E5;
    background-image: url(http://www.graphixplus.com/images/no-pic.gif);
	background-color:#C6C6C6;
    }
	
ul#nav li {
    position: relative;
    }

li ul {
    position: absolute;
    left: 99%;
    top: 0;
    display: none;
	background-color: #006696;
    }

ul#nav li a:hover {
	display: block;
	text-decoration:none;
	color:#E5E5E5;
	background-color:#006696;
}
    
ul#nav li a {
    display: block;
    font-family:arial;
	font-size:11px;
	text-decoration: none;
	color: #006696;
    padding: 1px;
    border: 1px solid #E5E5E5;
    border-bottom: 0;
    }
	
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */

ul#nav li:hover ul, ul#nav li.over ul { 
    display: block;
    }
/*MAIN MENU LIST STYLE ENDS */

/* FOOTER STYLES */
.footer {
padding:10px;
background-color:#006696;
font-family:arial;
font-size:10px;
color:#c6c6c6;
text-decoration:none;
border: 1px solid #E5E5E5;
}

a.footnav:link {
font-family:arial;
font-size:10px;
color:#c6c6c6;
text-decoration:underline;
}

a.footnav:visited {
font-family:arial;
font-size:10px;
color:#c6c6c6;
text-decoration:underline;
}

a.footnav:hover {
font-family:arial;
font-size:10px;
background-color:#E5E5E5;
color:#006696;
text-decoration:underline;
}
/* end of footer */

Any help is greatly appreciated!

On the main page of my site, I have a "slogan box" with a width set to 40%. This is outlined and has a background color. In IE, it outlines and colors in the blank space up to 40%, the desired effect. But in Firefox and Mozilla, it outlines only up to where the text stops.

Here's the main css behind it:
#slogan
{
border-bottom:2px solid black;
border-right:2px solid black;
border-left:2px solid black;
background-color:#ABAABB;
font-family:comic sans ms;
width:40%;
}

Attactched is the screenshot from IE and firefox.

How can I make it look like it does in IE for all browsers (i.e., what is the correct code?)

The full code can be seen here.

OK - I know all about the media="print" attribute. But I don't know how to force a background color (styled in a div tag; ie "background-color: black;") to print when the webpage is printed. I would think this would be a fairly common requirement but have not stumbled upon it.

Also, it probably doesn't matter but I have been using Javascript to add the divs to the page dynamically, so I don't know if that would have any effect. Probably not.

Any help would be appreciated.

I have this transparent png image and it looks great on a web page when you put a background color on it. the only transparent part is the border, the rest is white, so the bg color is really for border.

When you go to print it, however, printers dont normally show bg colors
Is there some way how I can force printing the the bg color when the user prints the page? (I know some times u can configure that on their printer but I don't want them to have to do anything. )

I've been trying to figure out how I can use css to make one side of the body one color and the other side another color. For example: if I want the entire left 70% of the page to be white and the right 30% to be black. no margins. it needs to stretch the entire length of the page regardless if there's any content in a div or not. And it need to be fluid. I've been trying everything I know and apparently that's not very much because I can't figure it out.

The link below is what I've tried using a bg image. Hopefull this will illustrate the idea. But I don't want to use a bg image if I don't have to plus the division where the color changes needs to be fluid with the text and I haven't figured out how to do it with the offset percentages. Basically the left side needs to be white as wide or wider as the left column and the right side color can go from that point all th eway right regardless of how wide the browser is. Does that make sense? I think I could do it if it were 50/50 but that's not what I'm after.

http://sonicparke.com

Has anybody done this or know how it should be done?