Shadows

ok thanks, I got it working but now I have a new problem, I want to make tables in each column using css but heres my result.As you can see, I want the blocks seated underneath each other in their respective column. <div id="leftcol"> <div id="sidecontainer"> <span class="title">Site Nav</span> <div id="line"></div> -- <a href="/home" title="Home">Home</a><br /> -- <a href="/faq" title="FAQ">FAQ</a><br /> -- <a href="/about" title="Contact">About</a><br /> -- <a href="/contact" title="Contact">Contact</a><br /> -- <a href="/linkus" title="Link to us">Link Us</a><br /> -- <a href="/topsites" title="Top Sites">Top Sites</a><br /> -- <a href="/stats" title="Stats">Statistics</a><br /> -- <a href="/webmasters" title="Web Masters">Web Masters</a><br /> -- <a href="/users_list" title="Members List">Members List</a><br /> -- <a href="/b_affiliate" title="Voting Booth">Become Affiliate</a><br /> </div> </div> <div id="sidecontainer"> <span class="title">Second Left Block</span> <div id="line"></div> Under first block </div> </div> </div> Here is the code I'm using for the sidecontainer #sidecontainer { padding: 3px; border-bottom: 1px solid #C0C0C0; border-top: 1px solid #C0C0C0; border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0; background-color: #F2F2F2;}

Hi guys, I'm in the process of learning css however upon adopting the approach of using div tags instead of tables, I'm having trouble with one column. I'm using a traditional design with left, mid and right column.Its the middle column thats giving me a problem. To make the containers, I am using the following css code. #leftcol { float: left; margin: 10px 0 0 10px; width: 20%; height: 150px; border-top: 1px solid #393939; border-left: 1px solid #393939; border-right: 1px solid #393939; border-bottom: 1px solid #393939; padding:}#midcol { float: none; margin: 10px auto 0 auto; width: 54%; height: 150px; border-top: 1px solid #393939; border-left: 1px solid #393939; border-right: 1px solid #393939; border-bottom: 1px solid #393939;}#rightcol { float: right; margin: -152px 10px 0 0; width: 20%; height: 150px; border-top: 1px solid #393939; border-left: 1px solid #393939; border-right: 1px solid #393939; border-bottom: 1px solid #393939;} It displays perfectly in ff and opera however IE doesnt render it correctly. I've done alot of searching and found something very similar such as using display: inline; however this completely breaks the display.Below is a screenshot of the containers in Ie, can anyone help or give a suggestion?http://www.wjdev.net/table.gif<<removed tags because of image stretching the screen. Click the link to see the screenshot.>>