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] Link to comment https://forums.phpfreaks.com/topic/32079-adding-borders-to-my-divs-causes-width-problems/ 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] Link to comment https://forums.phpfreaks.com/topic/32079-adding-borders-to-my-divs-causes-width-problems/#findComment-148871 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%. Link to comment https://forums.phpfreaks.com/topic/32079-adding-borders-to-my-divs-causes-width-problems/#findComment-148907 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 Link to comment https://forums.phpfreaks.com/topic/32079-adding-borders-to-my-divs-causes-width-problems/#findComment-149496 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. Link to comment https://forums.phpfreaks.com/topic/32079-adding-borders-to-my-divs-causes-width-problems/#findComment-151684 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.