FantomOptik Posted August 3, 2006 Share Posted August 3, 2006 First off, I just wanted to say that this board has been an amazing wealth of knowledge.I have been tweaking and trying to get this page to work correctly in FF for a few days and am ready to pull what hair I have left out.I have a 3 column layout that is wrapped in a container and I want all three coloumns to be the same height. I can't seem to get the container div to encompass everything on a basic page where the content of the middle (#main) div does not reach the bottom. When this happens, the container stays short of the columns. On the pages where the main content reaches below the container, it works perfectly and all three columns elongate to the same size as the main div.Here is some code to help explain things (I hope): body { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#475868; margin:1px; padding:0px;}#frame { position:relative; width:758px; margin:auto; border:1px solid #475868;}#top { position:relative; width:748px; height:90px; background-image:url(images/logo.jpg); padding:5px;}#banner { position:relative; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; width:748px; height:15px; background:#475868; color:#ffffff; padding:5px;}#leftcontent { position:absolute; left:0px; top:130px; width:100px; background:#ffffff; color:#475868; padding:10px 10px 0px 10px; margin:0px;}#main { position:relative; left:115px; top:0px; color:#475868; width:500px; background:#f5f5f5; border-left:1px dotted #475868; border-right:1px dotted #475868; padding:10px; margin:0px;}#rightcontent { position:absolute; right:0px; top:130px; width:100px; background:#ffffff; color:#475868; text-align:center; padding:0px 10px 10px 10px; margin:0px;} And here some html: <body> <div id="frame"> <div id="top"></div> <div id="banner"></div> <div id="leftcontent"> Content in this section is static and the size of the div will not change. Nav Link<br /> Nav Link<br /> Nav Link<br /> Nav Link<br /> Nav Link<br /> Nav Link<br /> Nav Link<br /><br /> <hr /> A form for login to a web based application goes here <hr /> <p align="center">Proud Member of:<br /> Some logo graphics with links would go here</p> </div> <div id="main"> Main content goes here. This content is dynamic and amount of data in this div will be updated and changed constantly </div> <div id="rightcontent"> Content in this section is static and the size of the div will not change. </div> </div> I hope this explains the issue and I am hoping that someone will be able to look at the css and tell me what I am doing wrong.FYI, I am using a simple <link rel="stylesheet" type="text/css" href="tms.css" /><!--[if IE]> <link rel="stylesheet" type="text/css" href="tmsIE.css" /><![endif]--> to switch css files for IE. Link to comment Share on other sites More sharing options...
Chandra.Vedantham@gmail.com Posted August 4, 2006 Share Posted August 4, 2006 Hi,Try using the styles for the leftcontent, main, and rightcontent as given below: #leftcontent { height: auto; width:100px; background:#ffffff; color:#475868; padding:10px 10px 0px 10px; margin:0px; display: inline; vertical-align: top; } #main { color:#475868; width:500px; height: 79%; background:#f5f5f5; border-left:1px dotted #475868; border-right:1px dotted #475868; padding:10px; margin:0px; display: inline; vertical-align: top; } #rightcontent { width:100px; height: auto; background:#ffffff; color:#475868; text-align:center; padding:0px 10px 10px 10px; margin:0px; display: inline; vertical-align: top; } 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