1 reply [Last post]
Steve887
Offline
newbie
Last seen: 14 years 51 weeks ago
Joined: 2006-12-11
Posts: 1
Points: 0

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 very 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:














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:

Content........................................................

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 have used the CSS generator on this site, but it seems to break when you put lots in the middle column.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

For your left and right

For your left and right shadows, don't create additional elements to hold them, just create a bg-image as wide as the layout + the shadows and attach it either to the body or the container for your site.
As for the easiest way to achieve equal height columns on a fixed width layout, faux columns really is the way to go.
By the way, there's no such thing as position: inherit and certainly not position: relative inherit.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference