I am trying to change my css file and am at a standstill. Site is at: http://www.0nic.com/ I want to complete the outlines around the ads to the right and can't figure it out. Any help please... Here is my css file: body { background: #ffffff url('images/bg.jpg') repeat-x; color: #282828; text-align:center; } a { font:12px Verdana,Tahoma,Arial,sans-serif; color: #000099; text-decoration:none; } a:hover { font:12px Verdana,Tahoma,Arial,sans-serif; color: #000099; text-decoration:underline; } #container { font:12px Verdana,Tahoma,Arial,sans-serif; width:850px; color: #343434; margin:0px auto; text-align:left; border: #ffffff 0px solid; } #header { width:850px; height:100px; color: #343434; margin-bottom:10px; } #logo { float: left; border: 0px; } #logo img{ border: 0px; } #url { float: right; padding-top:25px; padding-right: 50px; } #nav a{ color: #000099; text-decoration:none; } #nav a:hover{ color: #191919; text-decoration:none; } #clean{ clear: both; } #left { float:left; width:570px; margin:0px; padding: 0px; } #left p{ padding-left: 9px; padding-right: 9px; padding-top: 0px; padding-bottom: 0px; margin-bottom: 1px; } #right { float:right; width:250px; margin:0 0px 0 0px; } #right p{ background: url('images/bg.jpg'); margin:0px; padding:9px; color: #000099; } #right a{ text-decoration:none; border:0px; color: #000099; } #right a:hover{ text-decoration:none; border:0px; color: #ffffff; } #right img{ border:0px; } h1{ font-size:16px; color: #282828; padding-left: 9px; } h2{ font-size:16px; color: #ffffff; padding-left: 9px; } #left img{ border:0px; padding-left: 5px; } #ltop{ background: url('images/wtop.jpg'); width: 250px; height: 15px; } #lbot{ background: url('images/wbot.jpg'); width: 250px; height: 15px; margin-bottom: 10px; } #wtop{ background: url('images/wtop.jpg'); width: 560px; height: 15px; } #wbot{ background: url('images/wbot.jpg'); width: 560px; height: 15px; margin-bottom: 10px; } #gtop{ background: url('images/wtop.jpg'); width: 560px; height: 15px; } #gbot{ background: url('images/wbot.jpg'); width: 560px; height: 15px; margin-bottom: 10px; } #gmid{ background: url('images/wmid.jpg') repeat-y; width: 560px; color: #343434; } #wmid{ background: url('images/wmid.jpg') repeat-y; width: 560px; } #wmid1{ background: url('images/wmid.jpg') repeat-y; width: 560px; } #wmid p{ margin: 0px; padding-left: 9px; padding-top: 0px; padding-right: 9px; padding-bottom: 0px; } #gmid p{ margin: 0px; padding-left: 9px; padding-top: 0px; padding-right: 9px; padding-bottom: 10px; } #footer { clear:both; font:10px Verdana,Tahoma,Arial,sans-serif; text-align:center; padding-top:10px; padding-bottom:5px; } #footer a { font:14px Verdana,Tahoma,Arial,sans-serif; color: #000099; text-decoration:none; } #footer a:hover { font:10px Verdana,Tahoma,Arial,sans-serif; color: #282828; text-decoration:none; } h3 { font:9px Verdana,Tahoma,Arial,sans-serif; color: #282828; text-decoration:none; text-align: center; } Thanks!
Seems to me like the content should be wrapped in a container divider which would have a matching background image applied. You can try using a simple border value, but it's usually easier to use an image since it won't modify the box model. Essentially, just put an extra divider around your "boxes" and apply a style to it.