Steve887
12-11-2006, 01:51 AM
I've been working on this damn thing for four days now and have gotton no closer to getting an answer. Even after reading hundreds of tutorials, not understanding and getting more and more annoyed, I'm this >-< close to just using a table to do what I want.
I am trying to make a website with the basic header, 3 columns for content, then a footer. The header works fine, but the trouble arrives in the columns as I can't get them to be the same height.
I know there are ways to use 'faux' columns, IE hacks etc etc, but everything I read confuses me more, so if someone has a simple, easy bit of code for me to use I would be incredibly grateful.
What I'm trying to acheive: http://img227.imageshack.us/my.php?image=websitecopyro2.jpg.
My CSS:
#Content
{
position: inherit;
background-color: #a8b0b3;
}
#Content2
{
position: inherit;
background-color: #a8b0b3;
margin-right: 200px;
}
#LeftCol
{
position: absolute;
top: 360px;
left: 75px;
background-color: #a8b0b3;
width: 200px;
}
#CentreCol
{
position: relative inherit;
margin-left: 200px;
padding: 0px;
background-color: White;
height: 500px;
}
#CentreColContent
{
padding: 15px 6px 15px 6px;
}
#RightCol
{
position: absolute;
top: 360px; left: 768px;
background-color: #a8b0b3;
width: 157px;
}
HTML code:
<div id="Content">
<div id="Content2">
<div id="RightCol">
</div>
<div id="CentreCol">
<div id="CentreColContent">
</div>
</div>
</div>
<div id="LeftCol">
</div>
</div>
Secondly, as can be seen from the picture above, I'm trying to get a border on the left and right sides of the page. It is currently a picture that I have repeated vertically. The left one works fine, but I can't get the right one positioned correctly, if I try to put a left: xxxpx position on it, it just disappears.
Again, the CSS:
#LeftShadow
{
width: 50px;
background-image: url(images/left.jpg);
background-repeat: repeat-y;
background-position: 28px;
height: 100%;
float: left;
}
#RightShadow
{
width: 50px;
background-image: url(images/right.jpg);
background-repeat: repeat-y;
height: 100%;
background-position: 100px;
float: right;
}
and HTML:
<body>
<div id="LeftShadow">
<div id="RightShadow">
Content........................................................
</div></div>
</body>
If anyone can answer only one of these questions, I will be incredibly happy. If not, well I might have to revert to tables, which I don't want to do but I can't see any other choice after asking in 5 different forums, looking through hundreds of tutorials, following a book exactly and still not getting it to work.
I am trying to make a website with the basic header, 3 columns for content, then a footer. The header works fine, but the trouble arrives in the columns as I can't get them to be the same height.
I know there are ways to use 'faux' columns, IE hacks etc etc, but everything I read confuses me more, so if someone has a simple, easy bit of code for me to use I would be incredibly grateful.
What I'm trying to acheive: http://img227.imageshack.us/my.php?image=websitecopyro2.jpg.
My CSS:
#Content
{
position: inherit;
background-color: #a8b0b3;
}
#Content2
{
position: inherit;
background-color: #a8b0b3;
margin-right: 200px;
}
#LeftCol
{
position: absolute;
top: 360px;
left: 75px;
background-color: #a8b0b3;
width: 200px;
}
#CentreCol
{
position: relative inherit;
margin-left: 200px;
padding: 0px;
background-color: White;
height: 500px;
}
#CentreColContent
{
padding: 15px 6px 15px 6px;
}
#RightCol
{
position: absolute;
top: 360px; left: 768px;
background-color: #a8b0b3;
width: 157px;
}
HTML code:
<div id="Content">
<div id="Content2">
<div id="RightCol">
</div>
<div id="CentreCol">
<div id="CentreColContent">
</div>
</div>
</div>
<div id="LeftCol">
</div>
</div>
Secondly, as can be seen from the picture above, I'm trying to get a border on the left and right sides of the page. It is currently a picture that I have repeated vertically. The left one works fine, but I can't get the right one positioned correctly, if I try to put a left: xxxpx position on it, it just disappears.
Again, the CSS:
#LeftShadow
{
width: 50px;
background-image: url(images/left.jpg);
background-repeat: repeat-y;
background-position: 28px;
height: 100%;
float: left;
}
#RightShadow
{
width: 50px;
background-image: url(images/right.jpg);
background-repeat: repeat-y;
height: 100%;
background-position: 100px;
float: right;
}
and HTML:
<body>
<div id="LeftShadow">
<div id="RightShadow">
Content........................................................
</div></div>
</body>
If anyone can answer only one of these questions, I will be incredibly happy. If not, well I might have to revert to tables, which I don't want to do but I can't see any other choice after asking in 5 different forums, looking through hundreds of tutorials, following a book exactly and still not getting it to work.