My website is http://www.seovintage.com/ I'd like to adjust sidebar2 on right top by float but unable to myself. So please suggest me and reply me with coding. Thanks
you've got a number of issues in the code that should be cleaned up first -- and you are fixing the width on something that REALLY should be fluid or semi-fluid, or at the very least fixed at a size that's usable at something less than 1280 wide? It's also falling apart because you went and declared fixed heights on several elements, and as a rule of thumb fixed heights are broken accessibility. Falls into the "but I can do it in photoshop" trap. first off, get the CSS out of the markup -- it belongs in a separate file, and it's easier to work with that way since you can open two editor windows and work in the markup and it's CSS side-by-side. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Code (markup): XHTML 1.1 is NOT real world deployable and chock full of issues, the most recent XHTML you should be using is 1.0. Despite what some of the die-hard XML-tards will tell you! <link href="css/style.css" rel="stylesheet" type="text/css" /> <link href="css/ie-hack.css" rel="stylesheet" type="text/css" /> Code (markup): If you have to send a separate stylesheet for IE you're doing it all wrong -- if you're sending that IE stylesheet to all browsers, you're REALLY doing it wrong... and sending your screen layout's CSS to all media types by omitting a MEDIA attribute? Even worse. You've got H2's without a H1 before them, that makes no sense. you've got your presentational logo image in the markup as a IMG tag when it probably belongs in the CSS via image replacement. <ul> <b> <li id="first"> Code (markup): That little tiny bit of code, is chock full of problems. You can't put a B tag between a UL and LI -- the only thing that can go between UL and LI is whitespace; you cannot put tags there. Likewise even if it was valid to put it there, LI is block-level, and B is inline-level. Inline level tags CANNOT wrap block level... If you want the menu to appear bold (since there is ZERO semantic reason to do so) your best bet would be to declare it in the CSS, not with a bold tag. <h2><u>The SEO Vintage actual power of online business</u></h2> Code (markup): Likewise there is no semantic reason to underline a heading -- it's also considered bad accessibility since people will sit there trying to click on it thinking it's an anchor. If you REALLY want that underlined, do it in the CSS. (I'd use a wider border bottom if I wanted a divider, so people don't mistake it for an anchor.) <p div="first"> Code (markup): there is no such attribute as DIV... I think you MEANT to use ID, but that would conflict with the ID you've got on the main menu UL -- so I'd probably assume you meant both to be classes... though I'm not even sure what the devil those would even need ID or classes for. You do use #first a second time in #sidebar2 -- ID's are supposed to be unique, you can only use them ONCE per page. <h4 id="seo-head">SEO Quote</h4> Code (markup): What makes that a H4? It's not a subsection of the H2 before it, where's the H3 that should go between a h2 and h4... and since that seems to be a heading for the form after, why isn't it inside the form as a LEGEND? The form itself is full of problems since inputs are NOT paragraphs, you should be using labels instead of value on your fields to describe them, dodging the need for the "stupid javascript tricks", etc, etc... Oh, and in your CSS, I'd avoid the 'universal reset' of * { margin:0; padding:0; } since it makes styling form elements a pain cross-browser. Instead I'd suggest using a slightly larger reset: html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul,dl,dd,dt, table,tr,td,th,p,img { margin:0; padding:0; } img,fieldset { border:none; } Code (markup): There are bigger resets (like Meyer's reset reloaded) but those are fat, bloated and waste time on things we don't need reset... there are smaller ones (like the universal) but they tend to cause problems styling form elements. The above one (inspired by the now deceased Dan Schulz) comes in at a quarter of a K and resets just what needs to be reset. It's a nice safe middle-ground. For a site about SEO, that keywords meta is a bit of a horror show. It's called keyWORDS -- not keyphrases, not keysentences, keyWORDS. It should be 7 to 8 words found inside BODY as plaintext that you want to have more weight. You vary from that formula, and, well... that's why people are under the delusion it's ignored now. Certain titles, like "search engine optimization" or "link building" are typically ok, but if you feel like you're repeating the same words in multiple sections, cut them apart. As a rule of thumb think of it like a word jumble. It might also help to clean up the engrish into English. Some of the tenses used turn it into gibberish... like the description meta starting with "the" and having a few verbs reversed. So... what can be done to fix it? I'd open it up semi-fluid and put both sidebars AFTER the content column -- it's easier to make it fluid that way using negative margins... fixing all the markup and removing some unnecessary code in the process. BTW, some meaningful formatting could go a LONG ways towards helping keep the code clear and easy to maintain. If I was writing that same page, the markup would go something like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Description" content="Seovintage is dedicated for affordable search engine optimization services and to help grow up your online business." /> <meta name="keywords" content="packages,services,search engine optimization,SEO,india,link building" /> <title> SEO Services - Search Engine Optimization </title> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> </head><body> <div id="pageWrapper"> <h1> SEO Vintage <span><!-- image replacement --></span> </h1> <ul id="mainMenu"> <li><a href="/">Home</a></li> <li><a href="/about">About Us</a></li> <li><a href="/services">SEO Services</a></li> <li><a href="/blog">Blog</a></li> <li><a href="/testimonials">Testimonials</a></li> <li><a href="/contact">Contact Us</a></li> <li><a href="/resources">Resources</a></li> </ul> <div id="columnWrapper"> <div id="fauxColumn1"></div> <div id="fauxColumn2"></div> <div id="contentWrapper"><div id="content"> <!-- double wrapper makes it easier to do fluid columns --> <h2> SEO Vintage - The Actual Power <span>of an Online Business</span> </h2> <p> The Seovintage provide search engine optimization services over the vanished latest update the Google penguin. Of course, since we have been specializing in the industry and have therefore full-fledged expertise and experience in its wide-ranging aspects, we have full confidence to deliver simply the best results within a specific timeline. </p> <p> Designing a perfect link strategy is something that requires sincere efforts and expertise but we take modest pride on our Perfect Linking Solution innovative techniques that will work wonders in your link-building scenario. Meanwhile, many individuals link from an individual source, which enables the red flags to occur, as a result of which we specifically advise our clients and customers to do linking from varieties of sources to finally come by a paradigmatic link strategy to list in Google and other major search engines. We also put huge emphasis on having high PR as well as quality of the websites, which is truly one of the important requirements of our link campaign. </p> <p> At the same time, there must be the inclusion of unique contents in the web pages matching to your keywords and phrases. Using the relevant texts in the contents contributes a lot in offering improved keyword optimization. As it is widely proved that Google largely considers the anchored links with non-anchor links, that is why we implement the direct non-anchor link to raise the rank of your website in the SERP. </p> <!-- #content, #contentWrapper --></div></div> <div id="firstSidebar"> <h2>Our Best SEO Services</h2> <ul> <li><a href="search-engine-optimization.html">Search Engine Optimization</a></li> <li><a href="link-building">One way Link Building</a></li> <li><a href="social-bookmarking.html">Social Bookmarking</a></li> <li><a href="article-submission.html">Article writing & Submission</a></li> <li><a href="press-release-writing-submission.html">Press Release Writing & Submission</a></li> <li><a href="local-listing.html">Local Listing</a></li> <li><a href="business-profile-listing.html">Business Profile Listing</a></li> <li><a href="directory-research-submission.html">Directory Submission</a></li> <li><a href="video-sharing.html">Video Sharing</a></li> <li><a href="photo-sharing.html">Photo Sharing</a></li> <li><a href="slide-sharing.html">Slide Sharing</a></li> <li><a href="review-post.html">Rewiew Writing & Post</a></li> <li><a href="website-designing.html">Web Designing Service</a></li> <li><a href="social-media-marketing.html">Social Media Marketing</a></li> <li><a href="yahoo-questionaries.html">Yahoo Question & Answer.</a></li> <li><a href="social-media-optimization.html">Social Media Optimization</a></li> </ul> <!-- #firstSidebar --></div> <div id="secondSidebar"> <h2>Our SEO Packages</h2> <ul> <li><a href="#">Platinum</a></li> <li><a href="#">Golden</a></li> <li><a href="#">Silver</a></li> <li><a href="#">Bronze</a></li> </ul> <form action="submit-contact.php" method="post" id="contactForm"> <fieldset> <!-- legends are hard to style, so we'll use a span inside it that way we get the legend for semantics, but can style it until blue in the face --> <legend><span>Get an SEO Quote</span></legend> <label for="contactName">Name:</label><br /> <input name="Name" id="contactName" type="text" /> <br /> <label for="contactEmail">E-Mail:</label><br /> <input name="Email" id="contactEmail" type="text" /> <br /> <label for="contactPhone">Phone:</label><br /> <input name="Phone" id="contactPhone" type="text" /> <br /> <label for="contactCountry">Country:</label><br /> <input name="Country" id="contactCountry" type="text" /> <br /> <label for="contactWebsite">Website:</label><br /> <input name="Website" id="contactWebsite" type="text" /> <br /> <!-- assuming you meant message - or did you really mean we can order a massage? if it's a message, should probably be a textarea, not a input --> <label for="contactMessage">Message:</label><br /> <textarea name="message" id="contactMessage" rows="5" cols="20" ></textarea> <br /> <label for="contactBudget">Choose Budget:</label><br /> <select name="budget" id="contactBudget"> <option>more than $100</option> <option>more than $200</option> <option>more than $500</option> <option>more than $1000</option> <option>more than $2000</option> <option>more than $3000</option> </select> <br /> <input type="submit" class="submit" value="Send Me a Quote" /> <input name="pagename" value="contact.html" type="hidden" /> </fieldset> </form> <!-- #secondSidebar --></div> <!-- #columnWrapper --></div> <div id="footer"> Assuming you'd have a copyright type disclaimer here <!-- #footer --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): I'm on my way out the door, but I'll try to revisit this later to show you the CSS to go with that making your columns. Mind you, SOME of your column elements like the borders are impractical if you care about accessibility -- there are techniques like faux-columns which can be used to fake said appearance, but as I said above much of it falls into the "but I can do it in photoshop" trap.
... and here's what I came up with: http://www.cutcodedown.com/for_others/harish11/template.html as with all my examples the directory: http://www.cutcodedown.com/for_others/harish11 is wide open for easy access to the bits and pieces. Valid markup, should work all the way back to IE 5.5 without problems. The logo image should be non-transparent, and go in the CSS under 'h1 span' as it's background. Two absolute positioned elements are used to 'fake' the full height columns so that the entire layout can be dynamic height instead of fixed height. I use the classic "100% float and negative margins" trick to slide the columns into place, allowing the center column to be dynamic. As much as possible is declared in %/em so that it automatically enlarges everything for users of different default font sizes (like me)... I also took a few liberties like adding a footer and some hover states on the menu while I was in there... and switched it to sans-serif fonts since the default serif stacks are an accessibility failing on most screens (due to a lack of sufficient DPI -- in PRINT serif fonts are usually the better choice for legibility -- screen is the other way around!) Most importantly though is it's both elastic and semi-fluid, which means the layout is useful and adapts to everything from 800 wide to 1280, without sizes over 1280 being fed widths so big people will complain about the long lines of text... (or 1024 to 1440 for large font/120 dpi users -- that's the "elastic" part) Ideally a production copy of this would have media queries to adjust the layout by stripping off things like columns for sizes smaller than 800 wide, like tablets and phones. Hope this helps, any questions fire away.