Left and Right Shadow and Column Heights

Eskimo887 · December 9, 2006

Hi everyone,

I am in the process of designing a website using CSS and <div> tags for the layout and have run into a couple problems, any assistance would be appreciated.

First off, I wish to put two different images on the left and right sides of the screen, extending to the bottom. I can position the left one correctly, but am having trouble with the right.

[url=http://img241.imageshack.us/img241/3154/websitecopyfp2.jpg]http://img241.imageshack.us/img241/3154/websitecopyfp2.jpg[/url]. This is a mockup I did in Photoshop, the shadows to the left and right of screen are what I'm trying to achieve.

The CSS I have so far that I believe doesn't work:

For some reason they're not showing up at all now.

[code]
#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;
}
[/code]

And the actual HTML:

[code]
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>

<body bgcolor="#eeeef0">

<form id="Main" runat="server">

<div id="LeftShadow">
<div id="RightShadow">

...Rest of Code...

</div>
</div>
</form>
</body>
</html>
[/code]

Secondly, as can be seen from the above picture, I have a 3 column layout with a footer. All three columns are fixed widths, but I wish for them all the be the same height, so that they are all the height of the column with the longest amount of content. I have read several articles of Feux tables and such, but they are quite confusing and a simple answer would be good.

Again, the CSS for the column section:

[code]
#LeftCol
{
position: absolute;
top: 360px; left: 75px;
background-color: #a8b0b3;
width: 157px;
height: auto;
}

#CentreCol
{
position: absolute;
top: 360px; left: 232px;
background-color: #ffffff;
width: 536px;
height: auto;

}

#RightCol
{
position: absolute;
top: 360px; left: 768px;
background-color: #a8b0b3;
width: 157px;
height: auto;
}
[/code]

And the relevent section of HTML code:

[code]
<div id="LeftCol">
blah blah blah
</div>

<div id="CentreCol">
blah blah blah
</div>

<div id="RightCol">
blah blah blah
</div>
[/code]

Again, any assistance would be appreciated.

Thanks in advance. :)

Sign In

Left and Right Shadow and Column Heights

Recommended Posts

Eskimo887

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information