Wed, 2011-09-21 13:58
Hi Guys
The "shadow_sides" class is not displaying on my "middle" id.
If I include my footer id inside the wrapper id, it works, but I get a white background on my bottom round corners.
Any help will be great!
Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> * { margin: 0; padding: 0; } body { background:#EEE; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } h1 { font-size:24px; color: #601111; } #wrapper { background:#FFF; width: 950px; height: auto; margin: 0 auto; } .shadow_sides { box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #000; -moz-box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #000; -webkit-box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #000; } #header { height: 216px; margin: 0 auto; } #headerleft { background-color:#FF9900; float: left; width:618px; } #navcontainer { width:618px; background-color:#601111; text-align:center; color:#FFF; height:42px; } #navcontainer ul { list-style-type: none; padding: 0; height: 42px; width: 600px; } #navcontainer ul li { display: inline; } #navcontainer ul li a { display: block; padding-right: 1.6658em; padding-left: 1.6658em; line-height: 42px; text-decoration: none; color: #FFF; } #navcontainer ul li:last-child { border-right:1px solid #FF0; } #navcontainer ul li a:hover { background-color: #950c0c; } #navcontainer ul li { float: left; border-right: 1px solid #FFF; } #navcontainer a { } #navcontainer a:link { color:#FFF; } #headerright { background-color:#993399; float: right; } #middle { padding: 10px 0px 5px 10px; clear: both; } #middlecontent { width: 695px; background-color: #0C0; float: left; } #middleform { width: 240px; background-color: #F00; height: 479px; float: right; } #footer { width: 950px; margin: 0 auto; color: #FFF; background-color: #3f3e3e; line-height: 44px; clear: both; border-bottomleft-radius: 10px; border-bottomright-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; } #footer a{ color: #FFF; } #footer a:hover{ color: #C36; } #footer p{ height: 44px; } </style> </head> <body> <p> </p> <div id="wrapper" class="shadow_sides"> <div id="header"> <div id="headerleft"> <div><img src="http://i53.tinypic.com/2zt9j44.jpg" width="618" height="174" /></div> <div id="navcontainer"> <ul> <li><a href="#">Exclusive advertising</a></li> <li><a href="#">Unlimited New Customers</a></li> <li><a href="#">Free website</a></li> <li><a href="#">Free Google Listing</a></li> </ul> </div><!--/ navcontainer --> </div> <!--/ headerleft --> <div id="headerright"> <div><img src="http://i51.tinypic.com/2rxjptl.jpg" width="332" height="216" /></div> </div> <!--/ headerright --> </div> <!--/ header --> <div id="middle"> <h1>Exclusive Advertising</h1> <p><br /> Gain a competitve advantage over your competitors in Miami, Florida. Your shop will be the only one listed on xxx.</p> <p>Have a Question? Call Us at 888-877-xxx</p> <p> </p> <div id="middlecontent"><p> </p><p align="center"> <iframe width="647" height="479" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=body+shops&aq=&sll=26.029792,-80.144148&sspn=0.054141,0.077162&vpsrc=0&ie=UTF8&hq=body+shops&hnear=&ll=26.029792,-80.144148&spn=0.054141,0.077162&t=m&output=embed"></iframe> </p> <p> </p> </div> <!--/ middlecontent--> <div id="middleform">Contact Form</div> <!--/ middleform--> </div><!--/ middle --> </div><!--/ wrapper --> <div id="footer" class="shadow_sides"> <p align="center">© Copyright 2009-2011 xxx All Rights Reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="#">Advertise with .com</a></p></div> <!--/ footer --> </body> </html>
Wed, 2011-09-21 15:06
#1
I found the problem, I needed
I found the problem, I needed to add "clear:both" after the middle closing div.
Hi Guys
The "shadow_sides" class is not displaying on my "middle" id.
If I include my footer id inside the wrapper id, it works, but I get a white background on my bottom round corners.
Any help will be great!
Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> * { margin: 0; padding: 0; } body { background:#EEE; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } h1 { font-size:24px; color: #601111; } #wrapper { background:#FFF; width: 950px; height: auto; margin: 0 auto; } .shadow_sides { box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #000; -moz-box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #000; -webkit-box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #000; } #header { height: 216px; margin: 0 auto; } #headerleft { background-color:#FF9900; float: left; width:618px; } #navcontainer { width:618px; background-color:#601111; text-align:center; color:#FFF; height:42px; } #navcontainer ul { list-style-type: none; padding: 0; height: 42px; width: 600px; } #navcontainer ul li { display: inline; } #navcontainer ul li a { display: block; padding-right: 1.6658em; padding-left: 1.6658em; line-height: 42px; text-decoration: none; color: #FFF; } #navcontainer ul li:last-child { border-right:1px solid #FF0; } #navcontainer ul li a:hover { background-color: #950c0c; } #navcontainer ul li { float: left; border-right: 1px solid #FFF; } #navcontainer a { } #navcontainer a:link { color:#FFF; } #headerright { background-color:#993399; float: right; } #middle { padding: 10px 0px 5px 10px; clear: both; } #middlecontent { width: 695px; background-color: #0C0; float: left; } #middleform { width: 240px; background-color: #F00; height: 479px; float: right; } #footer { width: 950px; margin: 0 auto; color: #FFF; background-color: #3f3e3e; line-height: 44px; clear: both; border-bottomleft-radius: 10px; border-bottomright-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; } #footer a{ color: #FFF; } #footer a:hover{ color: #C36; } #footer p{ height: 44px; } </style> </head> <body> <p> </p> <div id="wrapper" class="shadow_sides"> <div id="header"> <div id="headerleft"> <div><img src="http://i53.tinypic.com/2zt9j44.jpg" width="618" height="174" /></div> <div id="navcontainer"> <ul> <li><a href="#">Exclusive advertising</a></li> <li><a href="#">Unlimited New Customers</a></li> <li><a href="#">Free website</a></li> <li><a href="#">Free Google Listing</a></li> </ul> </div><!--/ navcontainer --> </div> <!--/ headerleft --> <div id="headerright"> <div><img src="http://i51.tinypic.com/2rxjptl.jpg" width="332" height="216" /></div> </div> <!--/ headerright --> </div> <!--/ header --> <div id="middle"> <h1>Exclusive Advertising</h1> <p><br /> Gain a competitve advantage over your competitors in Miami, Florida. Your shop will be the only one listed on xxx.</p> <p>Have a Question? Call Us at 888-877-xxx</p> <p> </p> <div id="middlecontent"><p> </p><p align="center"> <iframe width="647" height="479" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=body+shops&aq=&sll=26.029792,-80.144148&sspn=0.054141,0.077162&vpsrc=0&ie=UTF8&hq=body+shops&hnear=&ll=26.029792,-80.144148&spn=0.054141,0.077162&t=m&output=embed"></iframe> </p> <p> </p> </div> <!--/ middlecontent--> <div id="middleform">Contact Form</div> <!--/ middleform--> </div><!--/ middle --> </div><!--/ wrapper --> <div id="footer" class="shadow_sides"> <p align="center">© Copyright 2009-2011 xxx All Rights Reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="#">Advertise with .com</a></p></div> <!--/ footer --> </body> </html>