Solved

CSS -- removing some extra padding

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

757 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

24 Experts available now in Live!

Get 1:1 Help Now