...

View Full Version : Last Hope Before Tables - 3 Column Layout and Page Border



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.

Excavator
12-11-2006, 02:18 AM
Hello Steve887,
Your picture isn't coming up for me. I pieced your code together but it's definitely a work in progress and I really couldn't do much with it without knowing more what your looking to do.
Just so you know, and don't go to the dark side (tables), it is possible to do a 3column layout with CSS. I have a couple examples up... maybe one will do what your looking for?
example1 (http://www.nopeople.com/CSS/static_3_column/)
example2 (http://www.nopeople.com/CSS/faux_3-column/)
example3 (http://www.nopeople.com/CSS/another_3-column/)

Steve887
12-11-2006, 02:47 AM
Still doesn't work even if I copy it exactly.:mad:

Excavator
12-11-2006, 02:52 AM
What are you copying?

Steve887
12-11-2006, 02:59 AM
ASP.NET 2.0 - Website Programming, Problem - Design - Solution
by Marco Bellinaso
Wrox Press

_Aerospace_Eng_
12-11-2006, 07:58 AM
Your layout is actually pretty easy to do. Is it a fixed width or is it fluid? Judging by the header image I'm going to say its a fixed width. If it is then check out this example: http://bonrouge.com/3c-hf-fixed.php



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum