Borderless the 2 columns fit side by side perfectly but when borders are added the right sidebar goes beneath the main content box CSS #header { width: 800; algn:center; background-color: #333; color: #fff; } #content { float: left; width: 600px; background-color: #333; } #right { float: right; width: 200px; border-left: 3px dashed white; background-color: #333; } #container { width: 800; margin: 10px auto; background-color: #333; color: #fff; border: 3px solid white; } Code (markup): HTML <html> <head> <link rel="stylesheet" type="text/css" href="/style.css" /> </head> <body bgcolor="black"> <div id="container"> <div id="header"><center><img src="/images/logocolor.jpg"></center></div> <div id="content"> left </div> <div id="right"> right </div> </div> </body> </html> Code (markup):
You need to allow for the width of the borders themselves - so if you have two boxes each with a 3px border, you need to allow for the total width of the borders: 3px + 3px (both sides of one box) + 3px + 3px (both sides of second box) = 12px in total. Container = 800px Content = 600px Right = 200px Borderless, they will slip past one another but when you add the border you have a container = 800px trying to hold a total of 606px + 206px = 812px.
I got it working, thank god! Here's what it should look like for those who need help in the future. http://www.YayFreeGames.com HTML <div align="center"> <div id="container" class="clearfix"> <div id="header"> </div> <div id="content"> </div> <div id="right"> </div> </div> </div> Code (markup): CSS #header { width: 800; algn:center; background-color: #333; color: #fff; border-bottom: 1px dashed white; } #content { float: left; width: 600px; padding: 2px; border: 0px; background-color: #333; } #right { float: right; width: 190px; padding: 2px; margin: 0px; background-color: #333; vertical-align:top; border-left: 2px dashed white; } #container { width: 800px; text-align: left; padding: 0px; margin:0 auto; border: 3px solid #FFF; background-color: #333; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} /* End hide from IE-mac */ Code (markup): Thanks for the response mcfox!
No problem. Just a thought, but you may wish to preload those images in the top navigation so they appear as soon as mouseover instead of a short delay while they download.
Well, the main method of pre loading images is javascript, however I use CSS to do this, below is an article on the subject, scroll down to the bottom for the information. http://www.netmechanic.com/news/vol6/css_no18.htm Ash
Well I tried doing that but I couldn't because i'm using a javascript to complete the rollovers the buttons that show in normal html are the ones I don't need to preload. The ones I do are hidden away in javascript. So I used javascript for the preload. If someone visits my site for the first day please let me know if the preload thing works for the images. http://www.YayFreeGames.com Thanks! -Doug
For some reason I'm not seeing an efficient preload of those images - dunno why - I can see the code in the source. You still have errors in your css - don't forget you need to also allow for the padding in the same way you need to allow for the borders I'm seeing the same problem as you had initially when I view the site in Firefox - that's down to the padding. I've highlighted the errors. #header { width: 800[B]px[/B]; [I][B]align[/B]:center;[/I] (sp) background-color: #333; color: #fff; border-bottom: 1px dashed white; } #content { float: left; width: 600px; padding: 5px; [B]<<<-- must allow for the padding[/B] border: 0px; background-color: #333; } #right { float: right; width: 190px; padding: 2px; [B]<<<-- must allow for the padding[/B] margin: 0px; background-color: #333; vertical-align:top; border-left: 2px dashed white; } Code (markup):