loligator Posted March 30, 2010 Share Posted March 30, 2010 I am having a strange issue, someone please help! When I change the height of my container <div> to auto, the boarder dissapears.Here is my css: body{margin:0px;height:100%;font-size:10pt;font-family:"Tahoma", Arial, Sans-serif;}h1{font-size:14pt;font-family:"Tahoma", Arial, Sans-serif;font-weight:100;color:tan;margin-bottom:0px;margin-top:0px;margin-left:10px;margin-right:10px;}h2{font-size:8pt;font-family:"Tahoma", Arial, Sans-serif;font-weight:100;color:#aaa;margin-bottom:0px;margin-top:0px;margin-left:10px;margin-right:10px;}#container{position:relative;margin-left:auto;margin-right:auto;height:100%;width:800px;border-style:solid;border-width:1px;border-color:#ddd;}#header{position:absolute;top:0px;left:0px;height:70px;}.nav{position:absolute;top:70px;left:0px;height:25px;width:800px;}#navbar{position:absolute:height:25px;width:800px;left:0px;border:0px;border-style:none;font-size:10pt;text-align:center;font-family:"Times New Roman", Times, serif;}.hrslim{height:1px;background-color:#ddd;border:0px;margin-bottom:0px;margin-top:0px;}.hrfat{height:12px;background-color:tan;border:0px;margin-bottom:1px;margin-top:1px;}a:link{text-decoration:none;color:black;}a:active{text-decoration:none;color:black;}a:visited{text-decoration:none;color:black;}a:hover{text-decoration:none;color:#aaa;}.para{margin-left:10px;margin-right:10px;}.content{position:absolute;top:96px;} here is my html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <TITLE> Thul Tile Company </TITLE> <link rel="StyleSheet" type="text/css" href="style.css" media="screen" /> </head><body><div id="container"><div id="header"> <img src="images/header.png" /></div><div class="nav"><hr class="hrslim" /> <table id="navbar"> <tr> <td><a href="home.htm">Home</a> </td><td width="1px"><img src="images/divider.png"/></td> <td><a href="portfolio.htm">Portfolio</a> </td><td width="1px"><img src="images/divider.png"/></td> <td><a href="services.htm">Services</a> </td><td width="1px"><img src="images/divider.png"/></td> <td><a href="design.htm">Design</a> </td><td width="1px"><img src="images/divider.png"/></td> <td><a href="about.htm">About Us</a> </td><td width="1px"><img src="images/divider.png"/></td> <td><a href="contact.htm">Contact</a> </td> </tr> </table></div><div class="content"><hr class="hrfat" /><img src="images/mainpage.png" /><hr class="hrfat" /><br /><h1>Thul Tile Company</h1><h2>marble / granite / ceramic / related products</h2><p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper orci vel ligula tincidunt auctor. Duis metus enim, imperdiet iaculis tempor sed, vestibulum a dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros quis viverra pellentesque, nulla ligula commodo nisl, vitae auctor magna ipsum eu velit. Mauris at urna augue, vel vehicula nulla. Curabitur non lectus nec dolor interdum congue cursus ut quam. Phasellus non enim velit, ut pretium felis. Pellentesque dapibus ligula nec metus auctor in tincidunt ligula feugiat. Sed at leo in lectus semper varius. Sed nibh elit, tincidunt vel eleifend a, euismod in justo. Morbi id libero sit amet sem scelerisque blandit. Praesent elit ante, rhoncus in pulvinar tempus, aliquam in diam. Nulla elementum odio nec eros tempus bibendum. Aenean dui mi, sagittis in rhoncus nec, lacinia vitae sapien. Praesent ante neque, pharetra non viverra ut, auctor eu velit. Ut auctor sagittis lorem, sit amet aliquam justo tempor eu. Maecenas neque felis, tempus sed tristique ac, aliquam sed erat. Aliquam erat volutpat. Quisque vel augue vitae ligula convallis dapibus quis in dui. Proin dui dolor, tincidunt placerat laoreet ut, mattis et ante. </p></div></div></body></html> Thank you in advance! Link to comment Share on other sites More sharing options...
jeffman Posted March 30, 2010 Share Posted March 30, 2010 That is because you positioned the contents of the container div absolutely (which is a very poor design choice, BTW). Absolute positioning removes elements from the document flow. Setting height to auto means that the container's height will be determined by the height of the elements it contains. Since your content elements are out of the flow, their height has no effect on the height of the container div. It is not that your border has disappeared. It is that the container element has 0 height, so of course its border has no dimension.Your choice is to set the height manually or stop using absolute positioning. Your best positioning tools are height, width, margins, float, and clear, and using the difference between block display and inline display. Link to comment Share on other sites More sharing options...
loligator Posted March 31, 2010 Author Share Posted March 31, 2010 Are you saying that anything within the container div should use relative positioning?turned all the absolute values in the container div to relative. Works. thank you! Link to comment Share on other sites More sharing options...
jeffman Posted March 31, 2010 Share Posted March 31, 2010 I was not saying that. But if all you want is a solution to your immediate problem, and this seems to work, then I suppose that's fine. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.