Link to home
Start Free TrialLog in
Avatar of weikelbob
weikelbobFlag for United States of America

asked on

column background

I have 3 columns from CSS and I'm wonering how to make one of the column's background a different color.

Thank you,

Bob
Avatar of sajuks
sajuks

// try something like this
<style type="text/css">
.column-one
     {
     width: 66%;
  background-color: #999999;
     }
.column-two { margin-right: 66%; }
.column-three {margin-left: 75%;}
</style>

<div class="column-one">
A------
B------
B----
</div>

<div class="column-two">
<h2>column two</h2>
</div>

<div class="column-three">
<h2>column three</h2>
</div>
Example with table:

<HTML>
<HEAD>
<TITLE></TITLE>

<style>
.column_1
{
      background-color: red;
}

.column_2
{
      background-color: pink;
}

.column_3
{
      background-color: yellow;
}
</style>

</HEAD>

<BODY>

<table cellspacing="0" width="200px">
      <tr>
            <td class="column_1">1</td>
            <td class="column_2">2</td>
            <td class="column_3">3</td>
      </tr>
      <tr>
            <td class="column_1">1</td>
            <td class="column_2">2</td>
            <td class="column_3">3</td>
      </tr>
      <tr>
            <td class="column_1">1</td>
            <td class="column_2">2</td>
            <td class="column_3">3</td>
      </tr>
</table>

</BODY>
</HTML>
I guess the most usefull way of doing this is to use the <colgroup> and the <col> elements where you can specify properties voor table-columns. (example below)

You should note the 'cellspacing="0"' clause, because a cellspacing >0 breaks the coloring of the column, because the style you define in the <col> element only works on the below td/th elements and not on the spacing between those cells.

-r-

example:

<table cellspacing="0" border="0">
  <colgroup>
      <col style="background-color:red;">
      <col style="background-color:white;">
      <col style="background-color:blue;">
   </colgroup>
   <tr>
     <td>cell 1,1</td>
     <td>cell 1,2</td>
     <td>cell 1,3</td>
   </tr>
   <tr>
     <td>cell 2,1</td>
     <td>cell 2,2</td>
     <td>cell 2,3</td>
   </tr>
</table>
Avatar of weikelbob

ASKER

Thank you guys for all of the information so far.
OK, I probably don't want to use a table, I would like to do this only with CSS if possible.

Sajuks gave me a setup using all CSS. I am new and I could not figure this out.  I'm offering my code, and I hoping you guys can step me through this.

my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">


body
{
     margin:0;
     padding:0;
     font:13px arial, verdana, sans-serif;
}

#container
{
     min-width: 700px;
     max-width: 1200px;
     width: expression((this.parentNode.clientWidth > 1200)?1200+"px":(this.parentNode.clientWidth <= 700 + 0)?700+"px":"auto")
}


#header
{
       background:#ffffff url('background-picture.gif');
     text-align:center;
     /* no width needed */
     height:188px

}

#header img
{
     margin:0 auto;
     display:block;
}


#leftcol
{
     float:left;
     width:33%;
}

#centercol
{
     float:left;
     width:33%;
     text-align:center;
}

#rightcol
{
     float:left;
     width:33%;
}

.spacer
{
     padding:10px 20px;
}

#leftcol p, #rightcol p
{
     text-align:justify;
}


#footer
{
       background:#ffffff url('widening-footer.gif');
     text-align:center;
     /* no width needed */
     height:22px

}

#footer img2
{
     margin:0 auto;
     display:block;
}




img
{
     border:none;
}

img2
{
    border;none;
   
}

a:link, a:visited, a:hover, a:active
{
     text-decoration:none;
</style>
</head>

<body>

<div id="container">

<div id="header" style="width: 100%; height: 190px">
     <map name="FPMap0">
            <area href="index.html" shape="rect" coords="430, 172, 487, 189">
            <area href="more.html" shape="rect" coords="502, 174, 639, 189">
            <area href="contact.html" shape="rect" coords="653, 174, 733, 189">
            </map>
     <img border="0" src="../helen/header.jpg" width="750" height="190" usemap="#FPMap0"></div>

<div id="leftcol" style="width: 33%; height: 283px">
     <div class="spacer">
      <p align="justify"><b><i>Here is more about Helen:</i></b></p>
      <p align="justify">She has had periodicals printed
      in five languages, by the 'Christian Science Publishing society'.<br>
      &nbsp;<br>
      She has been published in five large news papers and several small ones,
      Idaho Farm Journal, and TV Guide.<br>
      &nbsp;<br>
      She has designed&nbsp; <a href="http://www.b-transfers.com/oreana">God and Country
      stickers</a> for cars, doors, mailboxes, etc. and several Biblical games,
      the games yet to be published.<br>
      &nbsp;<br>
&nbsp;</p>
      <p>&nbsp;</div>
</div>

<div id="centercol" style="width: 33%; height: 195px">
     <div class="spacer">
                  <p style="text-align: justify">She has&nbsp;had two songs published and
                  recorded by her daughter, Betty Nanney Hillman. <br>
                  &nbsp;<br>
                  Her hobby&nbsp;and third love is swimming, writing, painting.&nbsp; Her second
                  love her children and grandchildren, including grates. She loves
                  special times with the grandchildren. Her first Love is God and His
                  Christ, &quot;Jesus'.<br>
                  &nbsp;<br>
                  Her favorite movies are, &quot;Ten Commandments&quot;, with Charlatan Heston,
                  Gone With the Wind,&quot;&nbsp; and &quot;Passion of the Christ.&quot;<br>
                  &nbsp;<br>
                  Her favorite News castors are: O'Reilly, Greta, Shepherd Smith,
                  Sean, Heraldo, Beltway boys, Neil, most of Fox news casters.&nbsp; They
                  tell the Truth, and &nbsp;I like game shows that ask questions.<br>
                  &nbsp;<br>
&nbsp;</div>
</div>

<div id="rightcol" style="width: 33%; height: 245px">
     <div class="spacer">
     <div>
            <p style="margin-top: -1px; margin-bottom: -1px">&nbsp;</p>
            <p style="margin-top: -1px; margin-bottom: -1px">Her favorite TV show is
            700 Club, Shepherds Chapel, Bennie Hinn, Joyce Myers, Public Television,
            Discovery Channel, Wild Kingdom, and all those type shows, plus
            Diagnosis Murder, Murder She Wrote, Whose Line Is it.&nbsp; Most TV is a
            waste.&nbsp; I like clean comedy shows.</p>
            <p style="margin-top: -1px; margin-bottom: -1px"><br>
            Goldie Haun and Charleston Heston are Helen's favorite actors. She has
            spent over half of her life on the farm, and in land development.<br>
            &nbsp;<br>
            She loves all sports.&nbsp; </div>
            <div>
                  &nbsp;</div>
            <p>
            <img border="0" src="../helen/pallet-transparent.gif" width="152" height="97"></div>
</div>


<div id="footer" style="width: 100%; height: 22px">
           <img border="0" src="../helen/footergif.gif"></div>

</body>
</html>

Oh, and I would like my colored column to be of fixed width.
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">


body
{
     margin:0;
     padding:0;
     font:13px arial, verdana, sans-serif;
}

#container
{
     min-width: 700px;
     max-width: 1200px;
     width: expression((this.parentNode.clientWidth > 1200)?1200+"px":(this.parentNode.clientWidth <= 700 + 0)?700+"px":"auto")
}


#header
{
       background:#ffffff url('background-picture.gif');
     text-align:center;
     /* no width needed */
     height:188px

}

#header img
{
     margin:0 auto;
     display:block;
}


#leftcol
{
     float:left;
     width:33%;
       background-color: red;
}

#centercol
{
     float:left;
     width:33%;
     text-align:center;
       background-color: pink;
}

#rightcol
{
     float:left;
     width:33%;
       background-color: blue;
}

.spacer
{
     padding:10px 20px;
}

#leftcol p, #rightcol p
{
     text-align:justify;
}


#footer
{
       background:#ffffff url('widening-footer.gif');
     text-align:center;
     /* no width needed */
     height:22px

}

#footer img2
{
     margin:0 auto;
     display:block;
}




img
{
     border:none;
}

img2
{
    border;none;
   
}

a:link, a:visited, a:hover, a:active
{
     text-decoration:none;
</style>
</head>

<body>

<div id="container">

<div id="header" style="width: 100%; height: 190px">
     <map name="FPMap0">
          <area href="index.html" shape="rect" coords="430, 172, 487, 189">
          <area href="more.html" shape="rect" coords="502, 174, 639, 189">
          <area href="contact.html" shape="rect" coords="653, 174, 733, 189">
          </map>
     <img border="0" src="../helen/header.jpg" width="750" height="190" usemap="#FPMap0"></div>

<div id="leftcol" style="width: 33%; height: 283px">
     <div class="spacer">
     <p align="justify"><b><i>Here is more about Helen:</i></b></p>
     <p align="justify">She has had periodicals printed
     in five languages, by the 'Christian Science Publishing society'.<br>
     &nbsp;<br>
     She has been published in five large news papers and several small ones,
     Idaho Farm Journal, and TV Guide.<br>
     &nbsp;<br>
     She has designed&nbsp; <a href="http://www.b-transfers.com/oreana">God and Country
     stickers</a> for cars, doors, mailboxes, etc. and several Biblical games,
     the games yet to be published.<br>
     &nbsp;<br>
&nbsp;</p>
     <p>&nbsp;</div>
</div>

<div id="centercol" style="width: 33%; height: 195px">
     <div class="spacer">
               <p style="text-align: justify">She has&nbsp;had two songs published and
               recorded by her daughter, Betty Nanney Hillman. <br>
               &nbsp;<br>
               Her hobby&nbsp;and third love is swimming, writing, painting.&nbsp; Her second
               love her children and grandchildren, including grates. She loves
               special times with the grandchildren. Her first Love is God and His
               Christ, &quot;Jesus'.<br>
               &nbsp;<br>
               Her favorite movies are, &quot;Ten Commandments&quot;, with Charlatan Heston,
               Gone With the Wind,&quot;&nbsp; and &quot;Passion of the Christ.&quot;<br>
               &nbsp;<br>
               Her favorite News castors are: O'Reilly, Greta, Shepherd Smith,
               Sean, Heraldo, Beltway boys, Neil, most of Fox news casters.&nbsp; They
               tell the Truth, and &nbsp;I like game shows that ask questions.<br>
               &nbsp;<br>
&nbsp;</div>
</div>

<div id="rightcol" style="width: 33%; height: 245px">
     <div class="spacer">
     <div>
          <p style="margin-top: -1px; margin-bottom: -1px;">&nbsp;</p>
          <p style="margin-top: -1px; margin-bottom: -1px;">Her favorite TV show is
          700 Club, Shepherds Chapel, Bennie Hinn, Joyce Myers, Public Television,
          Discovery Channel, Wild Kingdom, and all those type shows, plus
          Diagnosis Murder, Murder She Wrote, Whose Line Is it.&nbsp; Most TV is a
          waste.&nbsp; I like clean comedy shows.</p>
          <p style="margin-top: -1px; margin-bottom: -1px;"><br>
          Goldie Haun and Charleston Heston are Helen's favorite actors. She has
          spent over half of her life on the farm, and in land development.<br>
          &nbsp;<br>
          She loves all sports.&nbsp; </div>
          <div>
               &nbsp;</div>
          <p>
          <img border="0" src="../helen/pallet-transparent.gif" width="152" height="97"></div>
</div>


<div id="footer" style="width: 100%; height: 22px">
          <img border="0" src="../helen/footergif.gif"></div>

</body>
</html>
RozanaZ,

I like the colored columns, now maybe you could help me make one of the columns fixed width.

Thank you,

Bob Weikel
ASKER CERTIFIED SOLUTION
Avatar of RozanaZ
RozanaZ

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I need a setup that has a single fixed width column, and the other two columns to be "fluid" -- resize themselves based on how big of a window they are in.

Thank you,

Bob
I like what sajuks was trying to offer me.  I'm new and I get confused implimenting it.  I want a fixed width for my first column and and I want the other two columns to stretch or shrink when the browser window size changes.

I'm putting down my code.  Maybe someone could make the desired changes and put stars (*) next to what you change.  Thank you.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">

body
{
     margin:0;
     padding:0;
     font:13px arial, verdana, sans-serif;
}

#container
{
     min-width: 700px;
     max-width: 1200px;
     width: expression((this.parentNode.clientWidth > 1200)?1200+"px":(this.parentNode.clientWidth <= 700 + 0)?700+"px":"auto")
}


#header
{
       background:#ffffff url('../helen/background-picture.gif');
     text-align:center;
     /* no width needed */
     height:188px

}

#header img
{
     margin:0 auto;
     display:block;
}


#leftcol
{
     float:left;
     width:33%;
}

#centercol
{
     float:left;
     width:33%;
     text-align:center;
}

#rightcol
{
     float:left;
     width:33%;
}

.spacer
{
     padding:10px 20px;
}

#leftcol p, #rightcol p
{
     text-align:justify;
}


#footer
{
       background:#ffffff
     text-align:center;
     /* no width needed */
     height:22px

}

#footer img2
{
     margin:0 auto;
     display:block;
}




img
{
     border:none;
}

img2
{
    border;none;
   
}

a:link, a:visited, a:hover, a:active
{
     text-decoration:none;
}</style>
</head>

<body>

<div id="container">

<div id="header" style="width: 100%; height: 190px">
     <map name="FPMap0">
            <area href="../helen/index.html" shape="rect" coords="430, 172, 487, 189">
            <area href="../helen/more.html" shape="rect" coords="502, 174, 639, 189">
            <area href="../helen/contact.html" shape="rect" coords="653, 174, 733, 189">
            </map>
     <img border="0" src="../helen/header.jpg" width="750" height="190" usemap="#FPMap0"></div>

<div id="leftcol" style="width: 33%; height: 283px">
     <div class="spacer">
      <p>
                  <img border="0" src="../helen/index1.jpg" width="135" height="79"><p align="justify">
                  <font face="Arial" size="2">Welcome
                  to Helen's home page. Helen is an artist and this page has an art
                  theme. She likes to paint mountain scenes, landscapes, water, sky,
                  trees and rocks.</font> </p>
                  <p align="justify"><font face="Arial" size="2">Helen loves to paint.
                  She gives away her paintings to family members. She has done some
                  watercolors, but she focuses more on acrylic painting.</font></p>
                  <p align="justify"><font face="Arial" size="2">Helen loves to go for
                  walks. It's her form of exercise.</font></p>
                  </div>
</div>

<div id="centercol" style="width: 33%; height: 195px">
     <div class="spacer">
                  <p style="text-align: left">
                  <font face="Arial" size="2">Helen is a grandmother, and she gives a
                  lot of support to her family. A lot of her life revolves around
                  them. She has many loving people that help her out, and she helps
                  the family out in whatever way she can.</font></p>
                  <p align="justify">
                  <font face="Arial" size="2">Helen is kind of new with computers, but
                  she loves working with them. She is running a bumper sticker
                  business online. Click here to see it.</font></p>
                  <p align="justify"><font face="Arial" size="2">Helen's favorite
                  movie is the Ten Commandments. Her favorite TV shows are Fox news ,
                  discovery channel, and public television.</font> </p>
                  <p align="justify"><font face="Arial" size="2">Helen loves to play
                  scrabble. She also loves to play pinochle and rummy, and she is a
                  good card player.</font></p>
                  <p align="justify">Helen attended High School at Homedale, Idaho,
                  and four years of College at Boise, State University, majoring in
                  Art, and Addiction counseling.&nbsp; Helen loves her teachers.
                  <p style="text-align: justify"><br>
                  &nbsp;<br>
&nbsp;</div>
</div>

<div id="rightcol" style="width: 33%; height: 245px">
     <div class="spacer">
     <div>
            <p style="margin-top: -1px; margin-bottom: -1px">&nbsp;</p>
            <p style="margin-top: -1px; margin-bottom: -1px">Helen was part of a family band, &quot;The Nannies&quot; , for twenty nine years.
            They played for <br>
            clubs, rodeos, conventions, barn dances, dance halls, Indian
            reservation, politicians, &amp; others. She traveled during this time, to
            Colorado, Wyoming, Montana, Oregon, Idaho, Washington, California, and
            Nevada. <br>
            <br>
            She is the author of two books, &quot;Journey Into the Light&quot; and &quot;Bear Face/
            Toward The Setting Sun&quot;. The first book, &quot;Journey&quot; will be out in the
            bookstores by December, and on line by November. &quot; Bear Face&quot; will be
            out sometime at the end of the year. <br>
            <br>
            She has an article of 'Bear Face Dodge', in &quot;They Made Wyoming Their
            Own&quot;.</div>
            <div>
                  &nbsp;</div>
            <p>&nbsp;</div>
</div>



<div id="footer" style="width: 100%; height: 22px">
     <p align="center">
            <map name="FPMap1">
            <area href="../helen/index.html" shape="rect" coords="69, 3, 129, 23">
            <area href="../helen/more.html" shape="rect" coords="143, 3, 276, 23">
            <area href="../helen/contact.html" shape="rect" coords="288, 5, 374, 23">
            </map>
            <img border="0" src="../helen/footer-copyright-jpg.jpg" usemap="#FPMap1"></div>


</body>
</html>