Solved

How do I add padding to content area?

Posted on 2011-02-10
2
493 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

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

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…

746 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

13 Experts available now in Live!

Get 1:1 Help Now