It is a three column theme. I like to widen the two sidebars slightly inwards so as to reduce the empty spacing between the main content. This is the original code for the sidebars. .layout-content-sidebar1 .main-inner { padding-left: 0; width: 100% } .layout-sidebar1-content .main-inner { padding-left: 0; float: none; width: 100% } .layout-sidebar1-content .main-wrap { margin-right: 0; margin-left: 34rem } .layout-sidebar1-content #content { float: right } .layout-sidebar1-content #sidebar-primary-wrap { float: left; margin-right: 0; margin-left: -34rem } .layout-sidebar2-content .main-wrap { margin-right: 0 } .layout-content-sidebar2 .main-inner { float: left; padding-left: 0; padding-right: 20rem } .layout-content-sidebar2 .main-wrap { margin-right: 0 } .layout-content-sidebar2 #sidebar-secondary-wrap { margin-right: 2rem; margin-left: -20rem; float: right } .layout-sidebar2-sidebar1-content .main-wrap { margin-right: 0; margin-left: 34rem } .layout-sidebar2-sidebar1-content #content { float: right } .layout-sidebar2-sidebar1-content #sidebar-primary-wrap { float: left; margin-right: 0; margin-left: -34rem } .layout-content-sidebar1-sidebar2 .main-inner { float: left; padding-left: 0; padding-right: 20rem } .layout-content-sidebar1-sidebar2 #sidebar-secondary-wrap { margin-right: 2rem; margin-left: -20rem; float: right } .layout-sidebar1-content-sidebar2 .main-inner { float: left; padding-left: 0; padding-right: 20rem } .layout-sidebar1-content-sidebar2 #sidebar-secondary-wrap { margin-right: 2rem; margin-left: -20rem; float: right } .layout-sidebar1-content-sidebar2 .main-wrap { margin-right: 0; margin-left: 34rem } .layout-sidebar1-content-sidebar2 #content { float: right } .layout-sidebar1-content-sidebar2 #sidebar-primary-wrap { float: left; margin-right: 0; margin-left: -34rem } In fact I have already customized the left sidebar (sidebar 2) with this code. .main-wrap { float: none; margin-right: 20rem; } #sidebar-primary-wrap { float: right; margin-right: -18rem; max-width: 100%; width: 18rem; } Now I would like to do is to widen the sidebar slightly so as to reduce the empty spacing between the boxed-up line of both sidebar and the boxed-up line of the main content.
Just looking at the CSS is a bit moot - it's MUCH simpler to just link the page, with the theme present, then we can have a look, do the changes needed directly on the site, while looking at it, and tell you what you need to change to achieve your goal. Much easier for all involved.
It's very hard to diagnose CSS without the HTML it's applied to since style without knowing how your markup is nested is gibberish; but a few things I'm noticing is you seem to be saying "0" way WAY too much on things like margins and paddings... and saying width:100% on things that should PROBABLY already be auto-expanding to that value. I would advice against using REM as a measurement at this point, it's unreliable cross-browser and has zero legacy support; if you know what you are doing EM provides the same thing for little or no extra effort. You also seem to be trying to do left and right floats with a negative margin layout method -- USUALLY if you are going to use that technique you want all your floats going the same direction. Alternating like that is going to be a bit difficult to maintain. You also seem to have a max-width:100% for nothing unless I'm really missing what you are doing here. I can't picutre a situation where you'd need such massively long and pointless classnames, much less that many classes on a layout unless you are doing something really hinky. I'd have to see the markup and what you are trying to do to weigh in more on this... but I think whatever it is you are trying to do you've really overthought it.
ooph, I've seen some BAD turdpress templates in my day, but... Everything WRONG with wordpress, multiplied by over 9000... Really if you don't know what's wrong with: <body class="wordpress ltr en en-us parent-theme y2015 m04 d03 h17 friday logged-out custom-background custom-header display-header-text plural home blog no-js sidebar-primary-active sidebar-secondary-active menu-primary-active menu-footer-active wp-is-not-mobile custom-header-no-image custom-header-text custom-header-text-color layout-sidebar2-content-sidebar1" dir="ltr" itemscope="itemscope" itemtype="http://schema.org/WebPage"> Code (markup): You probably shouldn't be working on a website. Much less you get deeper and it's endless pointless classes for nothing, endless pointless DIV for nothing, repeatedly loading the SAME .js (the google ads one) over and over, nonsensical document order/structure, overstuffed/self-redundant keywords (with zero document relevance), pointlessly redundant title attributes, attributes like TARGET and tags like CENTER that have no business in any website written after 1997... hardly a shock it ends up 26k of markup for less than 4k of plaintext and ONE content image -- likely 8 to 10k more than should have been needed (if one takes that "let's abuse a SELECT for navigation" scripttardery into account.) Honestly, that code is such a train-wreck hodge-podge of old-school and new-school good luck controlling a blasted thing it does -- there's likely little legitimate reason for the HTML of that page to be much more than: <!DOCTYPE html><html lang="en-US"><head><meta charset="UTF-8"> <meta name="description" content="selected best life quotes and inspirational sayings" /> <meta name="keywords" content="life,quotes,inspirational,famous,wisdom,words" /> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection,tv" /> <title> Quotes Quips Wise Words </title> </head><body> <div id="top"> <h1> Quotes - Quips - Wise Words<br /> <small>It's More Than Words</small> </h1> <div id="menuAndSearch"> <a href="#menuAndSearch" class="showMenu"></a> <a href="#" class="hideMenu"></a> <ul> <li><a href="/">Home</a></li> <li><a href="/about-quotes-quips-wise-words/">About</a></li> <li><a href="/post-sitemap.xml">Sitemap</a></li> </ul> <form method="get" action="/"> <fieldset> <label for="searchTerm">Search:</label> <input type="text" id="searchTerm" name="s" /> <input type="image" href="images/searchGlass.png" alt="Go" /> </fieldset> </form> <!-- #menuAndSearch --></div> <div class="contentWrapper"><div id="content"> <h2> <a href="/walt-disney-quotes-on-dreams-imagination-work-education-and-other-topics/" rel="bookmark"> Walt Disney Quotes On Dreams, Imagination, Work, Education And Other Topics </a> </h2> <div class="byline"> <a href="/author/kgdwt/" title="View all posts by Lay Kim">lay kim</a> at <span>Monday, January 12, 2015, 9:16 pm"</span> <!-- .byLine --></div> <p> Do you know <q>"If you can dream it, you can do it"</q> <strong>is NOT one of Walt Disney's quotes?</strong> I know almost every quote websites from the Internet copied each others blindly! </p><p> It is from the Horizon songs. You can find the answer in the book <a href="http://www.amazon.com/gp/product/1423153707/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1423153707&linkCode=as2&tag=hotowrfuidmae-20&linkId=YDIFZCPFVMYOIUVX"> <i>Disney Trivia from the Vault:Secrets Revealed and Questions Answered</i> </a> by Dave Smith, Chief Archivist Emeritus of the Walt Disney Company. </p> <a href="/wp-content/uploads/2015/01/walt-disney-quotes258x311.jpg" class="plate"> <img src="http://bestlifequotesblog.com/wp-content/uploads/2015/01/walt-disney-quotes258x311.jpg" alt="walt disney quotes on dreams, imagination, work, education and others" width="258" height="311" /> </a> <p> In fact that line was written by imagineer Tom Fitzgerald for the Horizons attraction at Epcot and used in various ways, from dialogue in the the ride to graphics. </p><p> It was wrongly quoted in the <i>Science of Imagineering</i> DVD series. </p><p> Anyway, here are my selected <strong>Walt Disney quotations</strong> to share with you: </p> <blockquote> <p> "All your dreams can come true if you have the courage to pursue them" </p> </blockquote><blockquote> <p> "You can design and create, and build the most wonderful place in the world. But it takes people to make the <a href="/dreams-quotes-to-keep-your-hope-awake/">dream</a> a reality." </p> </blockquote><blockquote> <p> "I would rather entertain and <a href="/hope-quotes-never-let-you-down/">hope</a> that people learned something than educate people and hope they were entertained." </p> </blockquote><blockquote> <p> "We are not trying to entertain the <a href="/sarcastic-quotes-about-criticism-and-critics/">critics</a>. I'll take my chances with the public." </p> </blockquote><blockquote> <p> "The more you like yourself, the less you are like anyone else, which makes you unique."</p> <p>" </blockquote><blockquote> <p> <a href="/laughter-quotes-to-brighten-your-day/">Laughter</a> is timeless. Imagination has no age. And dreams are forever." </p> </blockquote><blockquote> <p> "It's kind of fun to do the impossible." </p> </blockquote><blockquote> <p> "I always like to look on the optimistic side of life, but I am realistic enough to know that life is a complex matter." </p> </blockquote><blockquote> <p> "A person should set his <a href="/quotes-about-setting-goals-and-achieving-them/">goals</a> as early as he can and devote all his energy and talent to getting there. With enough effort, he may achieve it. Or he may find something that is even more rewarding. But in the end, no matter what the outcome, he will know he has been alive." </p> </blockquote><blockquote> <p> "You reach a point where you don't work for <a href="/famous-quotes-about-money-and-life/">money</a>." </p> </blockquote><blockquote> <p> "we're curious and curiosity keeps leading us down new paths."</p><p>"When you're curious, you find lots of interesting things to do." </p> </blockquote><blockquote> <p> "Our greatest natural resource is the minds of our children." </p> </blockquote><blockquote> <p> "Disneyland will never be completed. It will continue to grow as long as there is imagination left in the world." </p> </blockquote><blockquote> <p> "There is more treasure in books than in all the pirate's loot on Treasure Island." </p> </blockquote><blockquote> <p> "Always remember that this whole thing was started with a <a href="/dare-to-dream-quotes-to-make-your-lifelong-dreams-come-true/">dream</a> and a mouse." </p> </blockquote><blockquote> <p> "All the <a title="adversity" href="/in-the-face-adversity-quotes-make-you-wiser-and-stronger-to-deal-lifes-problems/">adversity</a> I've had in my life, all my troubles and obstacles, have strengthened me. You may not realize it when it happens, but a kick in the teeth may be the best thing in the world for you." </p> </blockquote><blockquote> <p> "You're dead if you aim only for kids. Adults are only kids grown up, anyway." </p> </blockquote><blockquote> <p> "The way to get started is to quit talking and begin doing." </p> </blockquote><blockquote> <p> "Of all of our inventions for mass communication, pictures still speak the most universally understood language." </p> </blockquote><blockquote> <p> "The past can hurt. But the way I see it, you can either run from it, or learn from it." </p> </blockquote><blockquote> <p> "Think, <a href="/the-power-of-belief-quotes-that-can-change-your-life-forever/">Believe</a>, Dream, and Dare." </p> </blockquote><blockquote> <p> "When you believe in a thing, believe in it all the way, implicitly and unquestionable." </p> </blockquote> <div class="categories"> Categories: <ul> <li><a href="/category/walt-disney/">walt disney</a></li> </ul> <!-- .categories --></div> <ul class="pagination"> <li><span>1</span></li> <li><a href="/page/2/">2</a></li> <li><a href="/page/3/">3</a></li> <li><a href="/page/4/">4</a></li> <li>…</li> <li><a href="/page/237/">237</a></li> <li><a href="/page/238/">238</a></li> <li><a href="/page/239/">239</a></li> <li><a href="/page/2/">Next</a></li> </ul> <!-- #content, .contentWrapper --></div> <div id="extras"> <div class="firstSection"> <div class="subSection" id="quotesByTopic"> <h2> Quotes By Topic </h2> <a href="#quotesByTopic" class="showCategories"></a> <a href="#" class="hideCategories"</a> <ul> <li class="clickHereText"></li> <li><a href="/category/657">ability</a></li> <li><a href="/category/311">action</a></li> <li><a href="/category/313">adversity</a></li> <li><a href="/category/314">advice</a></li> <li><a href="/category/315">age</a></li> <li><a href="/category/580">albert camus</a></li> <li><a href="/category/226">albert einstein</a></li> <li><a href="/category/359">alfred hitchcock</a></li> <li><a href="/category/237">anthony robbins</a></li> <li><a href="/category/176">apology</a></li> <li><a href="/category/132">appreciation</a></li> <li><a href="/category/297">attitude</a></li> <li><a href="/category/246">beach</a></li> <li><a href="/category/208">beauty</a></li> <li><a href="/category/577">belief</a></li> <li><a href="/category/236">benjamin franklin</a></li> <li><a href="/category/325">bicycle</a></li> <li><a href="/category/222">bob dylan</a></li> <li><a href="/category/565">brian tracy</a></li> <li><a href="/category/634">buddha</a></li> <li><a href="/category/80">business</a></li> <li><a href="/category/96">charlie chaplin</a></li> <li><a href="/category/85">chiasmus</a></li> <li><a href="/category/62">christmas</a></li> <li><a href="/category/225">clever</a></li> <li><a href="/category/120">confucius</a></li> <li><a href="/category/104">cool</a></li> <li><a href="/category/77">country song</a></li> <li><a href="/category/427">creativity</a></li> <li><a href="/category/271">criminal minds</a></li> <li><a href="/category/532">criticism</a></li> <li><a href="/category/285">dalai lama</a></li> <li><a href="/category/199">desire</a></li> <li><a href="/category/675">dierks bentley</a></li> <li><a href="/category/665">dream</a></li> <li><a href="/category/293">earl nightingale</a></li> <li><a href="/category/248">edward george bulwer-lytton</a></li> <li><a href="/category/585">eleanor roosevelt</a></li> <li><a href="/category/214">encouragement</a></li> <li><a href="/category/295">enthusiasm</a></li> <li><a href="/category/263">failure</a></li> <li><a href="/category/24">family</a></li> <li><a href="/category/494">famous italians</a></li> <li><a href="/category/308">flirty</a></li> <li><a href="/category/594">follow your heart</a></li> <li><a href="/category/666">forgiveness</a></li> <li><a href="/category/267">free stuff</a></li> <li><a href="/category/595">freedom</a></li> <li><a href="/category/596">friedrich nietzsche</a></li> <li><a href="/category/597">friendship</a></li> <li><a href="/category/598">george bernard shaw</a></li> <li><a href="/category/323">goals</a></li> <li><a href="/category/35">god</a></li> <li><a href="/category/97">graduation</a></li> <li><a href="/category/631">grey livingston</a></li> <li><a href="/category/599">happiness</a></li> <li><a href="/category/673">harlan howard</a></li> <li><a href="/category/602">health</a></li> <li><a href="/category/206">hope</a></li> <li><a href="/category/240">humor</a></li> <li><a href="/category/603">jealousy</a></li> <li><a href="/category/121">jim rohn</a></li> <li><a href="/category/193">johann wolfgang von goethe</a></li> <li><a href="/category/653">john c maxwell</a></li> <li><a href="/category/581">john lennon</a></li> <li><a href="/category/649">lana turner</a></li> <li><a href="/category/633">lao tzu</a></li> <li><a href="/category/470">laughter</a></li> <li><a href="/category/83">leadership</a></li> <li><a href="/category/37">life</a></li> <li><a href="/category/320">loneliness</a></li> <li><a href="/category/183">love</a></li> <li><a href="/category/583">mae west</a></li> <li><a href="/category/162">mark twain</a></li> <li><a href="/category/413">marriage</a></li> <li><a href="/category/642">mignon mclaughlin</a></li> <li><a href="/category/95">money</a></li> <li><a href="/category/310">music</a></li> <li><a href="/category/475">naughty</a></li> <li><a href="/category/130">oscar wilde</a></li> <li><a href="/category/163">others</a></li> <li><a href="/category/604">pain</a></li> <li><a href="/category/606">patience</a></li> <li><a href="/category/38">peace</a></li> <li><a href="/category/166">personal growth</a></li> <li><a href="/category/76">pimples</a></li> <li><a href="/category/123">plato</a></li> <li><a href="/category/469">positive</a></li> <li><a href="/category/99">pregnancy</a></li> <li><a href="/category/567">products</a></li> <li><a href="/category/388">promotion</a></li> <li><a href="/category/390">proverbs</a></li> <li><a href="/category/408">question</a></li> <li><a href="/category/430">quips</a></li> <li><a href="/category/640">ralph waldo emerson</a></li> <li><a href="/category/418">relationship</a></li> <li><a href="/category/169">relaxation</a></li> <li><a href="/category/344">responsibility</a></li> <li><a href="/category/419">retirement</a></li> <li><a href="/category/669">romance</a></li> <li><a href="/category/491">sadness</a></li> <li><a href="/category/514">sales</a></li> <li><a href="/category/573">sarcasm</a></li> <li><a href="/category/593">self-esteem</a></li> <li><a href="/category/256">sexy</a></li> <li><a href="/category/428">somerset maugham</a></li> <li><a href="/category/75">songwriting</a></li> <li><a href="/category/258">sri swami sivananda</a></li> <li><a href="/category/608">stupidity</a></li> <li><a href="/category/607">success</a></li> <li><a href="/category/105">thank you</a></li> <li><a href="/category/88">the notebook</a></li> <li><a href="/category/609">thich nhat hanh</a></li> <li><a href="/category/610">thoughts</a></li> <li><a href="/category/94">truth</a></li> <li><a href="/category/513">under the tuscan sun</a></li> <li><a href="/category/472">vince lombardi</a></li> <li><a href="/category/650">voltaire</a></li> <li><a href="/category/678">walt disney</a></li> <li><a href="/category/178">will rogers</a></li> <li><a href="/category/591">wisdom</a></li> <li><a href="/category/433">wise words</a></li> <li><a href="/category/260">women</a></li> <li><a href="/category/424">words</a></li> </ul> <!-- #quotesByTopic.subsection --></div> <form class="subSection" action="http://feedburner.google.com/fb/a/mailverify" method="post" > <h2>Get your free updates</h2> <fieldset> <label for="signupEmail">Your Email Address:</label> <input type="text" id="signupEmail" name="email" /> <input type="hidden" value="TheBestLifeQuotesAndWiseWordsOfWisdom" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input type="submit" value="Signup Now!" /> </fieldset> </form> <!-- .firstSection --></div> <div class="secondSection"> <h2>Recent Posts</h2> <ul> <li> <a href="/walt-disney-quotes-on-dreams-imagination-work-education-and-other-topics/"> Walt Disney Quotes On Dreams, Imagination, Work, Education And Other Topics </a> </li><li> <a href="/best-53-romantic-lines-from-novels-captain-corellis-mandolin-dangerous-liaisons-wuthering-heights-and-others/"> Best 53 Romantic Lines From Novels: Captain Corelli's Mandolin, Dangerous Liaisons, Wuthering Heights And Others </a> </li><li> <a href="/forgiving-others-quotes-to-free-you-from-anger-and-guilt/"> Forgiving Others Quotes To Free You From Anger And Guilt </a> </li><li> <a href="/ability-quotes-to-bring-out-your-aptitude-capability-knowledge-and-skill/"> Ability Quotes To Bring Out Your Aptitude, Capability, Knowledge And Skill </a> </li><li> <a href="/john-c-maxwell-quotes-on-leadership-character-communication-change-decision-and-other-topics/"> John C. Maxwell Quotes On Leadership, Character, Communication, Change, Decision And Other Topics </a> </li> </ul> <!-- .secondSection --></div> <!-- #extras --></div> <hr /> <div id="footer"> <a href="/">Quotes - Quips - Wise Words</a> © 2015 <a href="/lay-kim/">Lay Kim</a> • <a href="/private-policy/">Private Policy</a> <!-- #footer --></div> <!-- #top --></div> </body></html> Code (markup): Just good luck convincing turdpress (or most of the people embracing the html 5-tardery and endless pointless scripttardery) of that. All that extra markup -- especially the HTML 5 redundancies (yes, I said REDUNDANCIES) makes it a disaster to even TRY and make stylistic changes to. Again why like most sites vomited up in turdpress using off the shelf templates, you might find it simpler to toss it and start over from scratch than it is to make even the simplest of changes to it.
Here's a reconfigured CSS, for just the exact purpose of widening the sidebars: #main { padding: 10px; } #sidebar-secondary-wrap { float: left; margin-right: -20rem; position: relative; width: 20rem; } .main-wrap { float: left; margin-left: 1rem; margin-right: 19rem; } #sidebar-primary-wrap { margin-left: 1rem; margin-right: -20rem; } Code (markup): You can of course adjust the amounts if needed, and this is just tested in Firefox - results may vary.
Now the left sidebar and the margin are perfect. But the right sidebar area is still out. Refer to the attached image. http://www.shareimages.com/image.php?80306-pJWcl5Sek5.snZyVnKo-margin1.jpg
Something must have gotten muddled: #main { padding: 10px; } .main-wrap { float: left; margin-left: 1rem; margin-right: 21rem; } #sidebar-primary-wrap { float: left; margin-left: 1rem; margin-right: -21rem; width: 20rem; } // remove the max-width: 100%; from that selector #sidebar-secondary-wrap { float: left; margin-right: -20rem; position: relative; width: 20rem; } Code (markup): try that...
Now the both margins are wider. See attached image. What changes do I have to do to reduce the spacing? http://www.shareimages.com/image.php?80307-pJqdl5SflZytlpyVnas-margin_2.jpg
Not sure. Apply the changes to the actual page, then I can have a look at what you've done, and what needs to be done differently. Showing me images isn't really helping me pinpoint what the problem is.
The nesting of those DIV is incorrect for that CSS to work -- that's why the markup has to be fixed FIRST. *SIGH* SERIOUSLY PEOPLE?!?
I agree, but since I've been able to fix his problem when working via Firebug, it's completely possible to fix it - without fixing the markup - not recommended, but possible
Not from what I'm seeing as the nesting order is broken for that type of layout -- seriously, take a good hard look at the DOM and you'll see WHY it's not working.
You need to fix the width and margin on this: #sidebar-secondary-wrap { float: left; margin-right: -20rem; position: relative; width: 20rem; } Code (markup): yours is currently saying -18 / 18 and remove this: .content-entry-wrap { padding-right: 2rem; } Code (markup): That's it
PoPSiCLe, you "pop" it! A million thanks for your tenacious effort and precious time. I really appreciate what you have done for me. Responsive Issue: When I tested my site out with Responsive Design Tester (http://mattkersley.com/responsive/), I noticed there is a slight problem with 240 x 320(small phone), 320x 480 (iPhone) and 480x680 (small tablet). Any idea how to fix them?
Yeah, you'll have to create some @media screen and (max-width: <something>px) { } - you then modify the rules needed to fit content into that specific container - for instance, to address the 240x320 resolution issue, you'd do something like this: @media screen and (max-width 240px) { #content { float: none; } .entry { border: 0; } Code (markup): That should fix the smallest one, and perhaps also some of the other ones. (You'll have to play around with the max-width-bit)
Hm, I'd suggest playing around a bit with the @media-rules - remember, this has to go on the bottom of the stylesheet (after the rules that are already in there), and you can adjust the number in the max-width: bit. Getting everything to work properly across devices with the code you have will take some effort, as it's not good - which means you'll have to play around with it a bit. I only tested on the page you showed me (the mobile check-page), and while it works there, it might do something different in "real world" applications.