Andy
Thanks
OK I understand -
This is what I was thinking of using because it filled the columns
with color -
/* CSS Document */
body {
background:#9343B9;
text-align:center;
margin:20px;
padding:0;
font:normal 0.8em/1.2em verdana,aria,sans-serif;
color:#666;
}
a {
color:#FFF;
text-decoration:none;
border-bottom:1px dotted;
}
a:hover {
border-bottom:1px solid;
color:#9343B9;
}
#wrapper1 {
position:relative;
text-align:left;
width:100%;
background:#FFF url("../images/rightcolor_bg.gif") repeat-y top
right;
}
#wrapper2 {
position:relative;
text-align:left;
width:100%;
background:url("../images/leftcolor_bg.gif") repeat-y top left;
}
#header {
background:#BB62AB;
padding:10px;
margin:0;
text-align:center;
color:#FFF;
}
#header h1 {
font-size:200%;
}
#header a:hover {
color:#7A2875;
}
#maincol {
position:relative;
margin:0;
padding:10px;
}
#leftcol {
position:relative;
top:-10px;
left:-10px;
float:left;
width:220px; /* for IE5/WIN */
voice-family: "\"}\"";
voice-family:inherit;
width:200px; /* actual value */
margin:0 0 -10px 0;
padding:10px;
background:#ECB9E8;
z-index:100;
}
#rightcol {
position:relative;
top:-10px;
right:-10px;
float:right;
width:220px; /* for IE5/WIN */
voice-family: "\"}\"";
voice-family:inherit;
width:200px; /* actual value */
margin:0 0 -10px 0;
padding:10px;
background:#D7C4FA;
z-index:99;
}
#centercol {
position:relative;
padding:0 240px;
}
#centercol a {
color:#666;
}
#centercol a:hover {
border-bottom:1px solid;
color:#9343B9;
}
#footer {
position:relative;
top:1px;
background:#7A2875;
width:100%;
clear:both;
margin:0;
padding:1% 0;
text-align:center;
color:#CCC;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<title>CSS Three Column Liquid Layout</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<link href="stylesheet/3-col-fluid.css" rel="stylesheet" type="text/
css" />
</head>
<body>
<div id="header"><!-- begin header -->
<h1>This is the header</h1>
</div><!-- end header -->
<div id="wrapper1"><!-- sets background to white and creates full
length leftcol-->
<div id="wrapper2"><!-- sets background to white and creates full
length rightcol-->
<div id="maincol"><!-- begin main content area -->
<div id="leftcol"><!-- begin leftcol -->
<p>This is the left column</p>
</div><!-- end leftcol -->
<div id="rightcol"><!-- begin rightcol -->
<p>This is the right column</p>
</div><!-- end righttcol -->
<div id="centercol"><!-- begin centercol -->
<p>This is the center column </p>
</div><!-- end centercol -->
</div><!-- end main content area -->
<div id="footer"><!-- begin footer -->
<p>This is the footer</p>
</div><!-- end footer -->
</div><!-- end wrapper1 -->
</div><!-- end wrapper2 -->
</body>
</html>
------------------------------------------------
------------------------------------------------
On May 20, 12:05 pm, Andrew Baughman <[email protected]> wrote:
> If you provide your current code I can give you html and css that you can
> plug in and use. Here is an example:
>
> /* css */
> div.left, div.middle {
> border: 1px solid #ccc;
> width: 100px;
> float: left;
> padding: 10px;
> margin: 0;
>
> }
>
> div.right {
> border: 1px solid #ccc;
> width: 100px;
> padding: 10px;
> margin: 0 0 0 240px;
>
> }
>
> /* html */
> <div>
>
> <div class="left">
> <p>Left column</p>
> </div>
>
> <div class="middle">
> <p>Middle column</p>
> </div>
>
> <div class="right">
> <p>Right column</p>
> </div>
>
> </div>
>
> On Tue, May 19, 2009 at 12:28 PM, TypicallyTropical <
>
>
>
> [email protected]> wrote:
>
> > Hi
>
> > Thanks for this.
>
> > I'm note sure why you need my current code? I may want to use this on
> > any page.
>
> > Could you give an example please?
>
> > Many thanks.
>
> > SC
>
> > On May 19, 2:14 pm, Andrew Baughman <[email protected]> wrote:
> > > Inside the center column, you could create three divs. The left and
> > middle
> > > divs would need 'float: left;' applied to them. The middle and right divs
> > > would need an appropriate 'margin-left' value applied to them. I assume
> > > theses are the same principles being applied in the main 3 column layout
> > you
> > > are using, only on a smaller scale. If you post the code you are using, I
> > > should be able to give better advice.
>
> > > On Mon, May 18, 2009 at 10:59 AM, TypicallyTropical <
>
> > > [email protected]> wrote:
>
> > > > Hi
>
> > > > I have a CSS 3 column layout but want to emulate a 3 column table
> > > > inside the centre column with CSS.
>
> > > > Therefore CSS columns inside a CSS column.
>
> > > > Are there any examples of this anyplace? I have searched and searched.
>
> > > > Surely I am not the only person needing this?
>
> > > > Many thanks
>
> > > > SC
>
> > > --
> > > Thanks,
> > > Andy Baughman
>
> --
> Thanks,
> Andy Baughman
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
