DaveLinger Posted December 28, 2006 Share Posted December 28, 2006 Here's the deal. I have a page designed with divs, in 2 main columns. a 15% and a 85% column. It's very important that they resize as they do. Problem is, I need to add a 2px border around both, which makes the size of the divs 15%+4px and 85%+4px, so that the second one is too large and drops below the first.Here's the exact code. Any ideas on how to get this to work?CSS:[code]body { background-color:#ccc; font-family: Verdana;}#layout1 { margin-left:auto; margin-right:auto; min-width:760px; width:95%; border: 10px solid #fff;}#header1 { text-align:center; float:left; background-color:#006699; width:15%; height:125px;}#header2 { font-size:20px; font-weight:bold; text-align:center; float:left; width:70%; height:125px;}#header3 { text-align:center; float:right; width:15%; height:125px;}#nav1 { clear:both; float:left; width:15%; }#body1 { background-color:#fff; float:left; width:85%;}#footer1 { text-align:center;}#footer2 { clear:both;}[/code]HTML:[code]<body> <div id="layout1"> <div id="header1">content </div> <div id="header2">content </div> <div id="header3">content </div> <div id="nav1">content </div> <div id="body1">content <div id="footer1">content </div> </div> <div id="footer2"> <-- This is to pull the 10px white border down --> </div> </div></body>[/code] Quote Link to comment Share on other sites More sharing options...
DaveLinger Posted December 28, 2006 Author Share Posted December 28, 2006 Forgot to mention; that was the code WITHOUT the borders. Here is the CSS with the borders:[code]body { background-color:#ccc; font-family: Verdana;}#layout1 { margin-left:auto; margin-right:auto; min-width:760px; width:95%; border: 10px solid #fff;}#header1 { text-align:center; float:left; background-color:#006699; width:15%; height:125px;}#header2 { font-size:20px; font-weight:bold; text-align:center; float:left; width:70%; height:125px; border-top:2px solid #006699; border-bottom:2px solid #006699;}#header3 { text-align:center; float:right; width:15%; height:125px; border-top:2px solid #006699; border-right:2px solid #006699; border-bottom:2px solid #006699;}#nav1 { clear:both; float:left; width:15%; }#body1 { background-color:#fff; float:left; width:85%; border-left:2px solid #006699; border-right:2px solid #006699; border-bottom:2px solid #006699;}#footer1 { text-align:center; border-top:2px solid #006699;}#footer2 { clear:both;}[/code] Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted December 28, 2006 Share Posted December 28, 2006 reduce the width of each div by 2%. Quote Link to comment Share on other sites More sharing options...
emehrkay Posted December 29, 2006 Share Posted December 29, 2006 it shouldnt cause any errors on a % width. it may be the fact that you have a min-width. add those pixels to yoru min-width Quote Link to comment Share on other sites More sharing options...
DaveLinger Posted January 2, 2007 Author Share Posted January 2, 2007 [quote author=emehrkay link=topic=120167.msg493323#msg493323 date=1167424020]it shouldnt cause any errors on a % width. it may be the fact that you have a min-width. add those pixels to yoru min-width[/quote]No luck, exact same result. Also, I cannot just make the divs 2% smaller, cause that leaves huge hideous gaps at anything larger than the minimum size. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.