Solved

How do I add padding to content area?

Posted on 2011-02-10
2
495 Views
Last Modified: 2012-05-11
Hello, I'm a css dummy.  I bought a css web template.  I want to add padding to the main content area because the content is smashed right up into the top left corner.  

Here' is how most of my content wrappers look:
<div id="content" class="xfluid">
    <div class="portlet x12">      
     PUT CONTENT HERE
    </div>
</div>

The style is in the code below.  When I tried going from this:
.x12                         { width: 940px; }
to this:
.x12                         { width: 940px; padding-left:20px; }
It padded the content but also stretched the whole content background area out to the right, over extending my menu header by what I assume was 20px;

Please lemme know if you see the solution.  Thanks, -

Justin


/* -------------------------------------------------------------- 
   Grid
-------------------------------------------------------------- */

.xgrid { width: 960px; margin: 0 auto; }
.xfluid { width: 96%; }

.x1 				{ width: 60px; }
.x2 				{ width: 140px; }
.x3 				{ width: 220px; }
.x4 				{ width: 300px; }
.x5 				{ width: 380px; }
.x6 				{ width: 460px; }
.x7 				{ width: 540px; }
.x8 				{ width: 620px; }
.x9 				{ width: 700px; }
.x10 				{ width: 780px; }
.x11 				{ width: 860px; }
.x12 				{ width: 940px; }

	.a1			{ padding-right: 80px; }
	.a2			{ padding-right: 160px; }
	.a3			{ padding-right: 240px; }
	.a4			{ padding-right: 320px; }
	.a5			{ padding-right: 400px; }
	.a6			{ padding-right: 480px; }
	.a7			{ padding-right: 560px; }
	.a8			{ padding-right: 640px; }
	.a9			{ padding-right: 720px; }
	.a10		{ padding-right: 800px; }
	.a11		{ padding-right: 880px; }
	.a12		{ padding-right: 960px; }
	
	.p1			{ padding-left: 80px; }
	.p2			{ padding-left: 160px; }
	.p3			{ padding-left: 240px; }
	.p4			{ padding-left: 320px; }
	.p5			{ padding-left: 400px; }
	.p6			{ padding-left: 480px; }
	.p7			{ padding-left: 560px; }
	.p8			{ padding-left: 640px; }
	.p9			{ padding-left: 720px; }
	.p10		{ padding-left: 800px; }
	.p11		{ padding-left: 880px; }
	.p12		{ padding-left: 960px; }


.xfluid .x1 		{ width: 6.33%; }
.xfluid .x2 		{ width: 14.66%; }
.xfluid .x3 		{ width: 23% }
.xfluid .x4 		{ width: 31.33%; }
.xfluid .x5 		{ width: 39.66%; }
.xfluid .x6 		{ width: 48%; }
.xfluid .x7 		{ width: 56.33%; }
.xfluid .x8 		{ width: 64.67%; }
.xfluid .x9 		{ width: 73%; }
.xfluid .x10 		{ width: 81.33%; }
.xfluid .x11 		{ width: 89.67%; }
.xfluid .x12 		{ width: 98%; }
	
	.xfluid .a1			{ padding-right: 8.33%; }
	.xfluid .a2			{ padding-right: 16.66%; }
	.xfluid .a3			{ padding-right: 25%; }
	.xfluid .a4			{ padding-right: 33.33%; }
	.xfluid .a5			{ padding-right: 41.66%; }
	.xfluid .a6			{ padding-right: 50%; }
	.xfluid .a7			{ padding-right: 58.33%; }
	.xfluid .a8			{ padding-right: 66.67%; }
	.xfluid .a9			{ padding-right: 75%; }
	.xfluid .a10		{ padding-right: 83.33%; }
	.xfluid .a11		{ padding-right: 91.67%; }
	.xfluid .a12		{ padding-right: 100%; }
		
	.xfluid .p1			{ padding-left: 8.33%; }
	.xfluid .p2			{ padding-left: 16.66%; }
	.xfluid .p3			{ padding-left: 25%; }
	.xfluid .p4			{ padding-left: 33.33%; }
	.xfluid .p5			{ padding-left: 41.66%; }
	.xfluid .p6			{ padding-left: 50%; }
	.xfluid .p7			{ padding-left: 58.33%; }
	.xfluid .p8			{ padding-left: 66.67%; }
	.xfluid .p9			{ padding-left: 75%; }
	.xfluid .p10		{ padding-left: 83.33%; }
	.xfluid .p11		{ padding-left: 91.67%; }
	.xfluid .p12		{ padding-left: 100%; }
	
.x1, .x2, .x3, .x4, 
.x5, .x6, .x7, .x8, 
.x9, .x10, .x11,  .x12 
{
	margin: 0 10px .75em;
	float: left;
}

.xfluid .x1, .xfluid .x2, .xfluid .x3, 
.xfluid .x4, .xfluid .x5, .xfluid .x6, 
.xfluid .x7, .xfluid .x8, .xfluid .x9, 
.xfluid .x10, .xfluid .x11,  .xfluid .x12 
{
	margin: 0 .85% 2em;
}

.xbreak { clear: both; }

.xgrid:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

Open in new window

grid.bmp
0
Comment
Question by:JT_SIRO
2 Comments
 
LVL 22

Expert Comment

by:plusone3055
ID: 34864654
padding 2px;

trial n error until you get the spacing that you desire...
 
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 250 total points
ID: 34864655
try

#content
{
  padding:5px;
}
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

The ability to automatically add page numbers to a layout is one of the many easy, convenient features InDesign has to offer. There are many reasons why you would want to automatically generate page numbers in your next project, so whether it’s a ma…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

776 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