Websites forum - Problems with CSS

Author

Problems with CSS

paul

2005-06-24, 7:32 pm

Hi,
Ok, so I've started with CSS-P and its not a simple as I thought!! :) 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!

Matt Probert

2005-06-24, 7:32 pm

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

>Hi,
>Ok, so I've started with CSS-P and its not a simple as I thought!! :) 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

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.
http://www.probertencyclopaedia.com

Beauregard T. Shagnasty

2005-06-24, 7:32 pm

In alt.www.webmaster, paul wrote:
> Hi,
> Ok, so I've started with CSS-P and its not a simple as I thought!! :)

Yeah, it is. <g>

I like Ben's templates. Look at his 3-col layout.
http://www.benmeadowcroft.com/webde...es/spider1.html

You should use em for your column margins instead of px, so that when
we resize your text, it all floats properly.

--
-bts
-This space intentionally left blank.