Steve887 Posted December 9, 2006 Share Posted 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.http://img241.imageshack.us/img241/3154/websitecopyfp2.jpg. 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. #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 the actual HTML: <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> 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: #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;} And the relevent section of HTML code: <div id="LeftCol"> blah blah blah </div> <div id="CentreCol"> blah blah blah </div> <div id="RightCol"> blah blah blah </div> Again, any assistance would be appreciated.Thanks in advance. Link to comment Share on other sites More sharing options...
jlhaslip Posted December 9, 2006 Share Posted December 9, 2006 I received a 403 Forbidden on that link to the jpg. Link to comment Share on other sites More sharing options...
Steve887 Posted December 9, 2006 Author Share Posted December 9, 2006 Hmm, here's a imageshack link then:http://img241.imageshack.us/img241/3154/websitecopyfp2.jpg Link to comment Share on other sites More sharing options...
jesh Posted December 11, 2006 Share Posted December 11, 2006 You might try something like this instead: <div id="Main"> <div id="LeftShadow"></div> <div id="RightShadow"></div> <div id="Content">...Rest of Code... </div></div> In the code you posted, you had the RightShadow div nested within the LeftShadow div and all of the content was nested in the RightShadow div. I would imagine that would mess up the float actions. If you had a main div which held the shadows and the content - each as separate elements - you could float the left shadow left and the right shadow right and the content should stay in the middle.Hope this helps. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now