Problems with CSS

External Since: Apr 04, 2005 Posts: 14

Hi,
Ok, so I've started with CSS-P and its not a simple as I thought!! Smile

I'm
attempting a three-col layout and I cant seem to get the center col to
behave. You can see what I mean at www.paulwatt.info the add of the css
file
is www.paulwatt.info/mainlayout.css .

Also how well supported is the "height" attribute in css? Could I use "*%"
in the height attribute to fill the rest of the screen?

Sorry to bother you, but I just cant figure it out!

TIA

Paul

--
I am using the free version of SPAMfighter for private users.
It has removed 3216 spam emails to date.
Paying users do not have this message in their emails.
Try www.SPAMfighter.com for free now!

External Since: Sep 14, 2004 Posts: 1625

Once upon a time, far far away "paul"
<paulioNOSPAM DeleteThis @wattio.freeserve.co.uk> muttered

>Hi,
>Ok, so I've started with CSS-P and its not a simple as I thought!! Smile

I'm
>attempting a three-col layout and I cant seem to get the center col to
>behave. You can see what I mean at <a style='text-decoration: underline;' href="http://www.paulwatt.info" target="_blank">www.paulwatt.info</a> the add of the css
>file
>is <a style='text-decoration: underline;' href="http://www.paulwatt.info/mainlayout.css" target="_blank">www.paulwatt.info/mainlayout.css</a> .
>
>Also how well supported is the "height" attribute in css? Could I use "*%"
>in the height attribute to fill the rest of the screen?
>
>Sorry to bother you, but I just cant figure it out!
>
>TIA
>
>Paul

Try this as a starting point:

<HTML>
<HEAD>
<style type="text/css">

#header
{
position: absolute;
left: 0px;
top: 0px;
right: 0px;
width: 100%;
height: 50px;
background-color: blue;
color: white;
padding: 10px;
}

#left
{
position: absolute;
top: 50px;
left: 0px;
width: 30%;
background-color: red;
color: white;
padding: 10px;
}

#center
{
position: absolute;
top: 50px;
width: 40%;
margin-left: 30%;
background-color: green;
color: white;
padding: 10px;
}

#right
{
position: absolute;
top: 50px;
right: 0px;
width: 30%;
background-color: brown;
color: white;
padding: 10px;
}
</style>

</head>

<body rightmargin=0; leftmargin=0>

<div id="header">
This is the header box!
</div>

<div id="left">
This is the left column!
<p>
You can hard code these columns to the same height if you wish using
the CSS height: command, or by padding with HTML <br> or
<p> ;</p> commands as desired.
</div>

<div id="center">
This is the center column!
</div>

<div id="right">
This is the right column!
</div>
</body>
</html>

Matt

--
If your encyclopaedia doesn't list "widget glass", you're reading the wrong encyclopaedia.
The Probert Encyclopaedia. Its not the same.
<a style='text-decoration: underline;' href="http://www.probertencyclopaedia.com" target="_blank">http://www.probertencyclopaedia.com</a>