Solved

CSS -- removing some extra padding

Posted on 2014-02-05
2
326 Views
Last Modified: 2014-02-05
Hi friends. I have another CSS question.

On this page here: http://test2.ebwebwork.com/pages/The-Book.cfm

there is about 20px of padding on either side of the main content area. I need to get rid of that padding, extending the white content column to the left; the orange sidebar, to the right.

When I edit the width of classes col_8 and col_4, havoc and chaos result.

What am I missing? Thank you as always for your help.

HTML:
<div class="col_8 main-content">


<h1>The Book</h1>
<p>In The Zero Marginal Cost Society, New York Times bestselling author Jeremy Rifkin argues that the capitalist era is passing&mdash;not quickly, but inevitably. The emerging Internet of Things is giving rise to a new economic system&mdash;the Collaborative Commons&mdash;that will transform our way of life.</p>
<p>In his provocative new book, The Zero Marginal Cost Society, Mr. Rifkin argues that the coming together of the Communication Internet with the fledgling Energy Internet and Logistics Internet in a seamless 21st century intelligent infrastructure&mdash;the Internet of Things&mdash;is boosting productivity to the point where the marginal cost of producing many goods and services is nearly zero, making them essentially free. The result is corporate profits are beginning to dry up, property rights are weakening, and the conventional mindset of scarcity is slowly giving way to the possibility of abundance. The zero marginal cost phenomenon is spawning a hybrid economy&mdash;part capitalist market and part Collaborative Commons&mdash;with far reaching implications for society.</p>
<p>Rifkin describes how hundreds of millions of people are already transferring parts of their economic lives from capitalist markets to what he calls the global &ldquo;Collaborative Commons.&rdquo; &ldquo;Prosumers&rdquo; are making and sharing their own information, entertainment, green energy, and 3-D printed products at near zero marginal cost. They are also sharing cars, homes, clothes and other items via social media sites, rentals, redistribution clubs, and cooperatives at low or near zero marginal cost. Students are even enrolling in free massive open online courses (MOOCs) that operate at near zero marginal cost. And young social entrepreneurs are establishing ecologically sensitive businesses using crowdfunding as well as creating alternative currencies in the new sharing economy. In this new world, social capital is as important as finance capital, access trumps ownership, cooperation supersedes competition, and &ldquo;exchange value&rdquo; in the capitalist marketplace is increasingly replaced by &ldquo;sharable value&rdquo; on the Collaborative Commons.</p>
<p>Rifkin concludes that while capitalism will be with us for the foreseeable future, albeit in an increasingly diminished role, it will not be the dominant economic paradigm by the second half of the 21st Century. We are, Rifkin says, entering a world beyond markets where we are learning how to live together in an increasingly interdependent global Collaborative Commons.</p> 

</div>



<div class="col_4 sidebar">

<p style="text-align: center;"><span style="font-size: 18pt;"><strong>Other Bestselling Books:</strong></span></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><strong>The Third Industrial Revolution</strong><br />Palgrave Macmillan, 2011<br /><br /><em>New York Times best-seller!</em></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><em><br /><strong>The Empathic Civilization</strong><br />Tarcher, 2009</em></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><em><img src="http://foet.org/books/ED-cover.gif" alt="Euro Dream Cover" width="110" height="152" /></em></p>
<p style="text-align: center;"><em><strong>The European Dream</strong><br />Tarcher/Penguin, 2004</em></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><em><img src="http://foet.org/books/HE-cover.gif" alt="Hydrogen Economy" width="110" height="152" /></em></p>
<p style="text-align: center;"><em><strong>The Hydrogen Economy</strong><br />Tarcher/Putnam, 2002</em></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><em><img src="http://foet.org/books/AA-cover.gif" alt="Age of Access" width="110" height="152" /></em></p>
<p style="text-align: center;">&nbsp;<strong>The Age of Access</strong><br />Tarcher/Putnam, 2000</p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><img src="http://foet.org/books/BC-cover.gif" alt="Biotech Century " width="110" height="152" /></p>
<p style="text-align: center;"><strong>The Biotech Century</strong><br />Tarcher/Putnam, 1998</p> 

</div>

Open in new window


CSS:
.col_1  { width: 6.6666666666667%; }
.col_2  { width: 15%; }
.col_3  { width: 23.333333333333%; }
.col_4  { width: 31.666666666667%; }
.col_5  { width: 40%; }
.col_6  { width: 48.333333333333%; }
.col_7  { width: 56.666666666667%; }
.col_8  { width: 65%; }
.col_9  { width: 73.333333333333%; }
.col_10 { width: 81.666666666667%; }
.col_11 { width: 90%; }
.col_12 { width: 98.333333333333%; }

Open in new window

0
Comment
Question by:Eric Bourland
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 8

Accepted Solution

by:
Adrian Crabtree earned 500 total points
ID: 39837779
Hi Eric, are you referring to the dark border that is to the right and left of the content? If that is what you are talking about, in order to remove that you can do the following:

Add a 0 the margin-left to .col_8, and the margin-right to .col_4. These margins are both set to 2%. Because you are removing essentially 4% off of the width of the two columns combined, you are going to want to add that to the width of .col_8. The CSS would look like this:

.col_8 {
  margin-top: -94px;
  margin-left: 0; /* This has changed from the original */
  margin-right: 0;
  margin-bottom: 0;
  width: 70%; /* This has changed from the original */
  background-color: #fff;
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 10%;
  padding-right: 10%;
}
.col_4 {
  margin-top: -94px;
  margin-right: 0; /* Only thing that has changed */
  margin-bottom: 0;
  margin-left: 0;
  width: 30%;
  background-color: #f39c22;
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 2%;
  padding-right: 2%;
}

Open in new window

I hope this help.
0
 
LVL 3

Author Closing Comment

by:Eric Bourland
ID: 39837781
Adrian, I see what you did, and that worked like a charm. Thanks very much. Have a great evening. Take care.

Eric
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question