Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Three coloumn layout with background colours

0 views
Skip to first unread message

R-D-C

unread,
Jul 22, 2004, 5:14:57 AM7/22/04
to
Hi,

looked throught the posts and can't quite see what I need. I want a four
box layout, each with different background colours. One box full width at
the top, left and right columns beneath this of fixed width with a box in
the middle sizing to fit. I have put something together which works fine in
Netscape but in Opera is slightly dodgy. In IE6 though, my centre <div>
sizes to the content so the width of the coloured background never quite
fits across :( My code is at the bottom of this post.

Can anyone help please?

Thanks


HTML. (a.html)

<html>
<head>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<div id="centre">Centre</div>
<div id="left">Left</div>
<div id="top">Top</div>
<div id="right">Right</div>
</body>
</html>


CSS. (a.css)

#left
{
background-color:red;
position:absolute;
left:0px;
width:160px;
top:100px;
height:500px;
}
#right
{
background-color:red;
position:absolute;
right:0px;
width:160px;
top:100px;
height:500px;
}
#centre
{
background-color:yellow;
position:absolute;
left:160px;
right:160px;
top:100px;
height:500px;
}
#top
{
background-color:blue;
position:absolute;
left:0px;
right:0px;
top:0px;
height:100px;
}


Kody Brown

unread,
Aug 4, 2004, 12:22:54 PM8/4/04
to
I'm not sure how to align a div to the width of a page without using
Javascript, But, this may help you out..

I set the centre div to 100% width of the page and set its left and right
padding to place the content where it will be visible.

(Copy the following code into an html form to view it)

<html>
<head>
<title>html</title>
<style type="text/css">
*
{
color: black;
font-family: Verdana, Tahoma, Arial;
font-size: 12px;
letter-spacing: 1px;
}
#top
{
background-color: #a0a0ff;
position:absolute;
width:100%;
left:0px;
top:0px;
height:100px;
}
#centre
{
background-color: #ffffa0;
position:absolute;
width: 100%;
left:0px;
top:100px;
height:500px;
padding-left: 160px;
padding-right: 160px;
}
#left
{
background-color: #ffa0a0;


position:absolute;
left:0px;
width:160px;
top:100px;
height:500px;
}
#right
{

background-color: #ffa0a0;


position:absolute;
right:0px;
width:160px;
top:100px;
height:500px;
}

</style>
</head>
<body style="margin:0px; overflow:auto;">

<div id="centre">
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
This is the Centre div. This is the Centre div. This is the Centre div.
</div>
<div id="left">
This is the Left div's content. This is the Left div's content. This is
the Left div's content. This is the Left div's content. This is the Left
div's content. This is the Left div's content. This is the Left div's
content.
This is the Left div's content. This is the Left div's content. This is
the Left div's content. This is the Left div's content. This is the Left
div's content. This is the Left div's content. This is the Left div's
content.
This is the Left div's content. This is the Left div's content. This is
the Left div's content. This is the Left div's content. This is the Left
div's content. This is the Left div's content. This is the Left div's
content.
</div>
<div id="top">
This is the Top div's content. This is the Top div's content. This is the
Top div's content. This is the Top div's content. This is the Top div's
content. This is the Top div's content. This is the Top div's content.
This is the Top div's content. This is the Top div's content. This is the
Top div's content. This is the Top div's content. This is the Top div's
content. This is the Top div's content. This is the Top div's content.
This is the Top div's content. This is the Top div's content. This is the
Top div's content. This is the Top div's content. This is the Top div's
content. This is the Top div's content. This is the Top div's content.
This is the Top div's content. This is the Top div's content. This is the
Top div's content. This is the Top div's content. This is the Top div's
content. This is the Top div's content. This is the Top div's content.
</div>
<div id="right">
This is the Right div's content. This is the Right div's content. This is
the Right div's content. This is the Right div's content. This is the Right
div's content. This is the Right div's content.
This is the Right div's content. This is the Right div's content. This is
the Right div's content. This is the Right div's content. This is the Right
div's content. This is the Right div's content.
This is the Right div's content. This is the Right div's content. This is
the Right div's content. This is the Right div's content. This is the Right
div's content. This is the Right div's content.
This is the Right div's content. This is the Right div's content. This is
the Right div's content.
</div>

</body>
</html>


--
-Kody
kody at weekendtech dot net
"Custom ASP.Net Web Controls"

"R-D-C" <nos...@please.uk> wrote in message
news:OxXTdx8b...@tk2msftngp13.phx.gbl...

0 new messages