4 replies to this topic

[pradeepmamgain]

Hi,

I am trying to design a site template. Its a three column layout site. I am not able to center the things.

Plese help me where i am wrong?

Below is the link to files...

Template

Thanks.

[ericrcan]

try this in your body:

body {
text-align: center;
}

then when you want text inside the div or whatever you used to align left, put:

#name {
text-align: left;
}

Also, to center in FireFox, put this in your "container" div:

margin-right: auto;
margin-left: auto;

to make things more neat, you dont have to put margin-top: 0px, margin-right: 0px, etc.... you can just do this:

margin: 0px 0px 0px 0px;

it goes: top, right, bottom, left...example:

margin: TOPpx RIGHTpx BOTTOMpx LEFTpx;

You can also do the same for padding, in the same way.

example:

you have:

.mc_table {
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 4px;
	padding-bottom: 4px;
}

you can put it to:

.mc_table {
	padding: 4px 4px 4px 4px;
}

Edited by zYpher, 14 February 2006 - 12:32 AM.

[pradeepmamgain]

I tried that but still niether the background and three columns are centered


See Image

[greg]

I don't mean to go off on a tangent, but since it's been mentioned: zYpher, if all 4 sides are the same, there's no point in writing it out four times. You can just use:

margin: 0;

Notice also there's no point in writing "px," since 0 is still 0 no matter what units you're using.

You can specify all four sides if they're all different:

margin: 1px 2px 3px 4px;

If the right and left sides are the same but the top and bottom aren't:

margin: 0 2px 3px;

In that case, the top is 0, the right and left are 2px and the bottom is 3px. If the top and bottom are the same and the left and right are the same, you can use:

margin: 2px 4px;

In which case, the top and bottom are 2px and the sides are 4px.

Edited by greg, 14 February 2006 - 05:16 PM.

[ericrcan]

pradeepmamgain, are you doing your site in tables or divs? try putting this around everything:

<div id="container">

content here


</div>

so if you were using tables, it would be like this:

<div id="container">
	<table>your hole layout in here...
</div>

if divs, then this:

<div id="container">

   <div id="header"></div
   <div id="left"></div>
   <div id="right"></div>

</div>

so basicly, but your whole page into a container..it should work like that if you have the body centering everything..