Boutdobindut
New Member
I am new to css and hope you guys can help me out.I'm trying to achive this:design templateBut getting this :-( actual resultsMy html looks like this (I cut off the html and head top portion):\[code\] <style type="text/css"> body{padding: 10px; background-color: #e8e8e8; font-family: Arial, Helvetica, sans-serif; font-size:12px;} h1{padding: 0px; margin: 0px;} #container{ width:900px; margin:0px auto; border:0px solid #bbb; padding:0px; } .white-box{width: 180px; margin: 0px;} .box-header{ height: 10px; overflow: hidden; background: #fff url(imgn/box-images/whiteBoxUpperRight.gif) top right no-repeat; } .box-header div{ width: 10px; height: 10px; overflow: hidden; background: #fff url(imgn/box-images/whiteBoxUpperLeft.gif) top left no-repeat; } .box-content{ background-color: #ffffff; padding: 10px 10px 10px; clear: both; } .box-footer{ height: 10px; overflow: hidden; background: #fff url(imgn/box-images/whiteBoxLowerRight.gif) bottom right no-repeat; clear: both; } .box-footer div{ width: 10px; height: 10px; overflow: hidden; background: #fff url(imgn/box-images/whiteBoxLowerLeft.gif) left bottom no-repeat; } #main-header { border:1px solid #bbb; height:80px; padding:10px; background:#FFF } #main-content { margin-top:10px; padding-bottom:10px; } #main-content div { padding:10px; border:1px solid #bbb; float:left; } #main-body { margin-left:10px; width:666px; height:150px; } #main-footer { float:left; margin-top:10px; margin-bottom:10px; padding:10px; border:1px solid #bbb; width:880px; } </style> </head> <body> <div id="container"> <div id="main-header">Main Header</div> <div id="main-content"> <!-- white box --> <div class="white-box"> <div class="box-header"><div></div></div> <div class="box-content"> <h1>Hello!</h1> <p>This is a content of a white box</p> </div> <div class="box-footer"><div></div></div> </div> <!-- end white box --> <div id="main-body"> <p>Main Bbody...</p> </div> </div> <div id="main-footer">Main Footer</div> </div> </body> </html>\[/code\]The goal is to have left white box in the column as well as body white box as displayed in template image. I also believe that I am missing something for white box body dark grey border. I guess an image should be there, but how?Thanks!