aliento Posted May 11, 2009 Share Posted May 11, 2009 For anyone wants to help. I have a ready css template, the content is at the center , at the left and the right it have empty space. I am trying to put content at the empty spaces left and right. At the left i did it but at the right i cant. Here is the online page Below is the code : html : <!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> <title>AppleWeb</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="all"> <div id="main_header"> <div id="header"> <ul> <li><a href="http://www.free-css.com/" class="home">home</a></li> <li><a href="http://www.free-css.com/" class="user" title="user">user</a></li> <li><a href="http://www.free-css.com/" class="contact">contact</a></li> </ul> <ul class="free"> <li><a class="call">800-121-4545 759-121-5454</a></li> </ul> <img src="images/logo.gif" alt="appleweb" width="205" height="65" title="appleweb" class="logo" /> <div class="top_website"><img src="images/top_blog.gif"></div> <div class="top_blog"><img src="images/top_blog.gif"></div> <ul class="navi"> <li><a href="http://www.free-css.com/">Network</a></li> <li><a href="http://www.free-css.com/">Submission</a></li> <li><a href="http://www.free-css.com/">Archives</a></li> <li><a href="http://www.free-css.com/">Finance</a></li> <li class="li1"><a href="http://www.free-css.com/">Testimonials</a></li> </ul> </div> </div> <div id="left_main">is a free, tableless, W3C-compliant web design layout by Template World. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like. We only ask you to not remove "Design by Template World" and the link http://www.templateworld.com from the footer of the template. If you are interested in seeing more of our free web template designs feel free to visit our website, Template World. We intend to add at least 25 new free templates in the coming month. <a href="http://www.free-css.com/">More...</a></div> <div id="main_body"> <div id="body"> <h2>why choose us?</h2> <p><span>AppleWeb</span> is a free, tableless, W3C-compliant web design layout by Template World. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like. We only ask you to not remove "Design by Template World" and the link http://www.templateworld.com from the footer of the template. If you are interested in seeing more of our free web template designs feel free to visit our website, Template World. We intend to add at least 25 new free templates in the coming month. <a href="http://www.free-css.com/">More...</a></p> <div id="event"> <h2>latest events <span>on 02nd october 2006</span></h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. DonecSed fringilla ligula dol, eleifend cursus, tincidunt ir, tempus id, elitau auguearcr. Nulla pede sapien, variusrtn vitae </p> <h3>tellus,dapibusvitae, vehicula vitae, <a href="http://www.free-css.com/">Aculis ante congue</a></h3> <p>aculis ante congue vel,uar risus. Aenean a pede. Sedr fringilla, quam uttellus text facilisisconsequat, elitaugu suscipit tellus, at iaculisant ante eget massa. Vestibulu facilisis. Quisque vel est.wr Donec ante velit, eleifenrer ucont cont, euismod etftrw rhoncus eget, sapien. Inter condimentum <a href="http://www.free-css.com/" class="more">more</a> </p> </div> <div id="support"> <h2>our support <span>Nulla pede sapien,</span></h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. DonecSed fringilla ligula dol,<u> eleifend cursus,</u> tincidunt ir, tempus id, elitau auguearcr. Nulla pede sapien, variusrtn vitae,</p> <ul> <li>pede. Sedr fringilla, quam, <a>uttellus textfacilisisconsequ, elitaugu </a></li> <li>pede. Sedr fringilla, quam, <a>uttellus textfacilisisconsequ, elitaugu </a></li> <li>pede. Sedr fringilla, quam <a>suscipit tellus, at iaculisant ante eget massa. Vestibulu facilisis. Qu</a></li> </ul> <a href="http://www.free-css.com/" class="online"> 24x7 hours <span>online chat</span></a> </div> <div id="services"> <h2>new services<span> R Richardson</span></h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. DonecSed fringilla ligula dol, eleifend cursus, tincidunt ir, tempus id, elitau auguearcr. Nulla pede sapien, variusrtn vitae, </p> <h3>tellus,dapibusvitae, vehicula vitae,</h3> <ul> <li><a href="http://www.free-css.com/">culis ante congue</a></li> <li><a href="http://www.free-css.com/">vel,uar risus. Aenean a</a></li> <li><a href="http://www.free-css.com/">pede. Sedr fringilla, </a></li> <li><a href="http://www.free-css.com/">quam uttellus text </a></li> <li><a href="http://www.free-css.com/">facilisisconsequat,</a></li> <li><a href="http://www.free-css.com/">elitaugu suscipit tellus,</a></li> <li><a href="http://www.free-css.com/">at iaculisant ante eget </a></li> <li><a href="http://www.free-css.com/">massa.velit,</a></li> </ul> <a href="http://www.free-css.com/" class="more1">more</a> </div> <br class="balnk" /> </div> </div> <div id="right_main">dssd</div> <div id="main_footer"> <div id="footer"> <ul> <li><a href="http://www.free-css.com/" class="mg">Network</a>|</li> <li><a href="http://www.free-css.com/">Submission</a>|</li> <li><a href="http://www.free-css.com/"> Archives</a>|</li> <li><a href="http://www.free-css.com/">Finance</a>|</li> <li><a href="http://www.free-css.com/">Testimonials</a></li> </ul> <ul class="ad"> <li><a>Can Can Road 0128 Thonhill Canada</a></li> <li class="nobor1"><a><span>ph:</span> 800-121-4545 759-121-5454</a></li> <li class="nobor"><a><span>fax:</span> 759-121-5454 800-121-4545</a></li> </ul> <p>© appleweb. All rights reserved.</p> <p class="de">Designed by: <a href="http://www.templateworld.com/">Template World</a></p> </div> </div> </div> </body> </html> css file : /* CSS Document */ body{ padding:0; margin:0; } div, p, h1, h2, h3, ul, img{ padding:0; margin:0; } ul{ list-style-type:none; } .balnk{ font-size:0px; line-height:0px; clear:both; } /*--------------------------------header-------------------*/ #main_header{ width:100%; margin:0 auto; background:url(images/bg.gif) repeat-x #CCCCCC; color:#FFFFFF; height:216px; } #main_header #header{ width:764px; margin:0 auto; background:url(images/header_pic.gif) no-repeat #fff6d8; color:#FFFFFF; height:216px; position:relative; } #main_header #header ul{ background:url(images/search_bg.gif) no-repeat #09283f; color:#FFFFFF; display:block; position:absolute; height:22px; width:123px; margin:0; padding:6px 0 0 26px; top:10px; left:0px; } #main_header #header ul li{ float:left; display:block; margin:0 23px 0 0; } #main_header #header ul li a{ height:15px; text-decoration:none; text-indent:-2000px; display:block; width:20px; } #main_header #header ul li a.home{ background:url(images/home.gif) no-repeat 0 0; width:16px; height:16px; } #main_header #header ul li a.home:hover{ background:url(images/home_h.gif) no-repeat 0 0; width:16px; height:16px; } #main_header #header ul li a.user{ background:url(images/user.gif) no-repeat 0 0; width:16px; height:16px; } #main_header #header ul li a.user:hover{ background:url(images/user_h.gif) no-repeat 0 0; width:16px; height:16px; } #main_header #header ul li a.contact{ background:url(images/contact.gif) no-repeat 0 0; width:19px; height:16px; } #main_header #header ul li a.contact:hover{ background:url(images/contact_h.gif) no-repeat 0 0; width:19px; height:16px; } #main_header #header ul.free{ background:url(images/toll_free-1.gif) no-repeat #09283f; color:#5d5024; display:block; height:28px; width:140px; padding:7px 0 0 43px; position:absolute; top:2px; left:580px; margin:0; } #main_header #header ul.free li{ float:left; display:block; font:10px/12px 'Trebuchet MS', Arial, Helvetica, sans-serif; text-align:center; color:#5D5024; margin:0px 0px 0 0; padding:0 0 0 0 ; text-transform:uppercase; font-weight:normal; background-color:#FFF6D8; } #main_header #header ul.free li span{ font-size:14px; line-height:16px; color:#FFFFFF; font-weight:bold; background-color:#ff0033; width:63px; height:16px; } #main_header #header ul.free li a.call{ color:#e5f4ff; font-size:11px; font-weight:normal; text-transform:uppercase; text-indent:0px; width:72px; margin:0 0 0 0px; padding:0 0 0 5px; background-color:#09283f; } #main_header #header .logo{ position:absolute; left:40px; top:74px; display:block; } #main_header #header ul.navi{ width:491px; display:block; position:absolute; top:189px; left:131px; padding:0; margin:0; background:none; } #main_header #header ul.navi li{ background:url(images/saparation.gif) no-repeat right; height:22px; padding:0 14px 0 5px; margin:0; display:block; float:left; } #main_header #header ul.navi li.li1{ background:none; height:22px; padding:0 14px 0 5px; margin:0; display:block; float:left; } #main_header #header ul.navi li a{ font:12px/21px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#847543; text-decoration:none; text-indent:0px; padding:0 0 0 15px; font-weight:bold; margin:0; width:inherit; background-color:#fff6d8; } #main_header #header ul.navi li a:hover{ background:url(images/navi_h.gif) no-repeat 0 2px; } /*------------------------------------body-------------------------*/ #main_body{ width:100%; background-color:#CCCCCC; color:#fff6d8; } #body{ width:764px; margin:0 auto 0 auto; padding:17px 0 0 0; background-color:#FFFFFF; } #body h2{ font:28px/24px 'Trebuchet MS', Arial, Helvetica, sans-serif ; color:#fff6d9; margin:0 0 15px 40px; font-weight:normal; background-color:#FFFFFF; display:block; } #body p{ background:url(images/welcome_pic.gif) no-repeat #FFFFFF; color:#799fbb; padding:0 0 0 114px; margin:0 0 0 40px; width:598px; display:block; font:13px/17px Verdana, Arial, Helvetica, sans-serif; } #body p span{ color:#fff6d8; background-color:#FFFFFF; } #body p span.bg{ color:#799fbb; background-color:#FFFFFF; } #body p a{ width:56px; height:12px; display:block; background:url(images/more_bg.gif) no-repeat #FFFFFF; margin:3px 0 42px 526px; font:11px/12px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; color:#ffffff; padding:0 0 0 5px; text-decoration:none; } #body p a:hover{ background:url(images/more_bg_h.gif) no-repeat #FFFFFF; color:#ff0033; } #event{ width:215px; padding:0 0 0 40px; float:left; display:block; } #event h2{ background:url(images/event_bg.gif) no-repeat ; font:24px/31px "Trebuchet MS", Arial, Helvetica, sans-serif; width:142px; height:45px; padding:5px 20px 0 54px; margin:0; font-weight:normal; display:block; } #event h2 span{ color:#847543; font:11px/12px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; background-color:#FFFFFF; display:block; } #event p{ width:191px; display:block; font:13px Verdana, Arial, Helvetica, sans-serif; color:#799fbb; background-color:#FFFFFF; margin:19px 0 0 23px; background:none; padding:0; } #event h3{ color:#fff6d8; font-weight:bold; font:14px Verdana, Arial, Helvetica, sans-serif; width:191px; display:block; margin:19px 0 0 23px; padding:0; background-color:#FFFFFF; } #event h3 a{ width:171px; height:17px; display:block; background:url(images/arrow.gif) no-repeat 160px 6px #FFFFFF; padding:0 0 0 7px; margin:4px 0 0px 0; font:11px/15px Verdana, Arial, Helvetica, sans-serif; color:#fff6d8; font-weight:bold; text-decoration:none; } #event h3 a:hover{ background:none; color:#fff6d8; background-color:#FFFFFF; } #event p a.more{ width:56px; height:12px; display:block; background:url(images/more_bg.gif) no-repeat #0a2b43; margin:22px 0 37px 118px; font:11px/11px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; color:#ffffff; padding:0 0 0 5px; text-decoration:none; } #event p a.more:hover{ background:url(images/more_bg_h.gif) no-repeat #0a2b43; color:#ff0033; } /*------------------------support-------------*/ #support{ width:215px; padding:0 0 0 25px; float:left; display:block; } #support h2{ background:url(images/support.gif) no-repeat; font:24px/31px 'Trebuchet MS', Arial, Helvetica, sans-serif; width:126px; height:45px; padding:5px 20px 0 71px; margin:0; font-weight:normal; display:block; } #support h2 span{ color:#847543; font:11px/12px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; background-color:#fff6d8; display:block; } #support p{ width:191px; display:block; font:13px Verdana, Arial, Helvetica, sans-serif; color:#799fbb; background-color:#0a2b43; margin:19px 0 19px 16px; background:none; padding:0; } #support ul{ width:191px; display:block; margin:0px 0 0px 16px; padding:0; } #support ul li{ font:12px/15px Verdana, Arial, Helvetica, sans-serif; color:#4994bb; background-color:#FFFFFF; width:191px; display:block; padding:0 0 0 0; } #support ul li a{ font:12px/17px Verdana, Arial, Helvetica, sans-serif; color:#799fbb; background-color:#FFFFFF3; text-decoration:none; display:block; padding:5px 0 5px 0; margin:0; } #support a.online{ width:146px; height:57px; border:#486d88 1px solid; display:block; margin:20px 0 0 16px; background-color:#051b2b; color:#fff6d8; padding:10px 18px 0 16px; font:22px/28px Verdana, Arial, Helvetica, sans-serif; font-weight:normal; text-transform:uppercase; text-decoration:none; } #support a.online span{ color:#799fbb; font-size:18px; line-height:18px; padding:0 0 0 8px; background-color:#051b2b; display:block; } #support a.online:hover{ background-color:#1c4f75; color:#fff6d8; } /*--------------------------------services-------------------*/ #services{ width:215px; padding:0 0 0 28px; float:left; display:block; } #services h2{ background:url(images/services.gif) no-repeat ; font:24px/31px 'Trebuchet MS', Arial, Helvetica, sans-serif; width:140px; height:45px; padding:5px 20px 0 53px; margin:0; font-weight:normal; display:block; } #services h2 span{ color:#847543; font:11px/12px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; background-color:#fff6d8; display:block; } #services p{ width:191px; display:block; font:13px Verdana, Arial, Helvetica, sans-serif; color:#799fbb; background-color:#0a2b43; margin:19px 0 0 16px; background:none; padding:0; } #services h3{ color:#799fbb; font:14px Verdana, Arial, Helvetica, sans-serif; width:190px; display:block; margin:19px 0 0 16px; padding:0; font-weight:bold; background-color:#FFFFFF; } #services ul{ width:191px; display:block; margin:5px 0 0 16px; } #services ul li{ background:url(images/arrow1.gif) no-repeat 0 12px ; display:block; padding:0 0 0 14px; } #services ul li a{ font:14px/24px Verdana, Arial, Helvetica, sans-serif; color:#799fbb; text-decoration:underline; background-color:#FFFFFF; } #services ul li a:hover{ text-decoration:none; } #services a.more1{ width:56px; height:12px; display:block; background:url(images/more_bg.gif) no-repeat #0a2b43; margin:39px 0 0 121px; font:11px/12px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; color:#ffffff; padding:0 0 0 5px; text-decoration:none; } #services a.more1:hover{ background:url(images/more_bg_h.gif) no-repeat #0a2b43; color:#ff0033; } /*---------------------------------footer-----------------*/ #main_footer{ width:100%; float:left; background:url(images/footer_bg.gif) repeat-x #0c1d2a; color:#ffffff; border-top:#ffffff 1px solid; margin:0px; padding:0px; } #footer { width:530px; height:187px; margin:0 auto 0 auto; } #footer ul{ width:500px; display:block; list-style-type:none; margin:46px 0 0 40px; position:absolute; } #footer ul li{ display:block; float:left; } #footer ul li a{ font:14px/12px 'Trebuchet MS', Arial, Helvetica, sans-serif; color:#ffffff; background-color:#09161f; text-decoration:none; margin:0 16px 0 16px; } #footer ul li a.mg{ font:12px/11px Arial, Helvetica, sans-serif; color:#ffffff; background-color:#09161f; text-decoration:none; margin:0 11px 0 0px; } #footer ul li a.mg:hover{ text-decoration:underline; } #footer ul li a:hover{ text-decoration:underline; } #footer ul.ad{ width:323px; display:block; list-style-type:none; margin:77px 0 0 90px; } #footer ul.ad li{ height:40px; width:96px; display:block; border-right:#FFFFFF 1px dashed; } #footer ul.ad li.nobor{ height:40px; width:96px; display:block; margin-left:10px; border-right:none; } #footer ul.ad li.nobor1{ height:40px; width:96px; display:block; float:left; margin-left:10px; border-right:#FFFFFF 1px dashed; } #footer ul.ad li a{ font:10px/12px Tahoma, Arial, Helvetica, sans-serif; color:#d1bd86; background-color:#0c1c27; font-weight:bold; text-decoration:none; margin:0 0 0 0; display:block; } #footer ul.ad li a span{ color:#ff0033; background-color:#0b1a24; text-transform:uppercase; margin:0 10px 0 0; display:block; } #footer ul.css{ width:100px; display:block; margin:75px 0 0 211px; font-size:0px; padding:0px; } #footer p{ padding:135px 0 0 165px; font:11px/16px Tahoma, Arial, Helvetica, sans-serif; color:#FAFAFA; background:url(images/footer_bg.gif) repeat-x #0c1d29; font-weight:normal; height:14px; margin:0; } #footer p.de{ padding:0 0 0 165px; margin:0; line-height:12px; width:160px; text-align:center; background-color:#0c1d2a; color:#fff; background:none; } #footer p.de a{ color:#fff; background-color:#0c1d2a; text-decoration:underline; } #footer p.de a:hover { color:#fff; background-color:#0a5083; } /* ------------------------ extra -------------------------- */ #all { width:100%; margin:0 auto; padding:0; } #main_header #header .top_website{ position:absolute; left:400px; top:60px; display:block; } #main_header #header .top_blog{ position:absolute; left:400px; top:110px; display:block; } #all #left_main{ float:left; width:158px; margin:0; padding:0; background:url(../images/bg_left_bg.gif); color:#FFF; font-size:90%; } #all #right_main{ float:left; width:158px; margin:0; padding:0; background:url(../images/bg_left_bg.gif); color:black; font-size:90%; } The template have one main div the #all inside is the #main_header then i have put the #left_main then the #body and i am trying to put after #body and before #footer the content to the #right but it doesnt work no mater what i tried? Any advice is helpfull Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.