Solved

CSS -- removing some extra padding

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

Suggested Solutions

Title # Comments Views Activity
How to use question mark (?) in filename with html 25 73
100% tall div not scrollable on iPhone 3 20
Media Queries  not Firing 6 19
How to create a table with buttons 3 22
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

828 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