Solved

CSS -- removing some extra padding

Posted on 2014-02-05
2
312 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
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

919 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now