JT_SIRO
asked on
How do I add padding to content area?
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
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;
}
grid.bmp
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
trial n error until you get the spacing that you desire...