Forum : css page setup
Brief description  about Online courses   join in Online courses
View Thangam  Nayagi 's Profile

css page setup

sir,

i want to design a page with a width of 80% and it should be aligned in the center, i.e with 10% spacing on left and right sides, how can i do that?

i gave the following code

<html>
<head>
<title>Rock2B Solutions
</title>
<style type="text/css">

body{
padding:0;
margin:0;
background:#CFECEC;
}

#outcntr{
width:100%;
}

#maincntr{
width:80%;
align:center;
border-right: 1px solid #AFC7C7;
border-left: 1px solid #AFC7C7;
background: white;
height: 100%;
margin-left: auto;
margin-right: auto;
}

#topline{
width:100%;
border:1px solid #ffffff;
background-color: #C0C0C0;
height:10px;
}


</style>
</head>
<body>
<div id="outcntr">
<div id="maincntr">
<div id="topline">
</div>
</div>
</div>

</body>
</html>

so how to do equal alignment on both sides?

thanks
Asked by Thangam Nayagi | Feb 1, 2011 |  Reply now
Replies (6)
View teacher siliconindia 's Profile
margin-left:150px;
margin-right:150px;

When you declare width:90% if you give percentage then this margin will work
If you give width:600px; then this wont work,

Bcz your layout width now 600px; from left 150px margin so total 750px + right 150px;

If your screen resolution 1024px; right side more gap will come, so if you give margin-left:auto: margin-right:auto: this will automatically align center.
Feb 2, 2011
View thangam nayagi 's Profile
cool answer santhosh :)
Feb 2, 2011
View santosh hegde 's Profile
You are right...
another to align center
set
margin: 0 auto;
in this cause margin-top will be 0 and other will be auto,
and you can set top margin instead of 0.
or
margin: 0 auto 0 auto;
in this cause margin will be top:0 right:auto bottom:0 and left: auto;
in this way you can also set margin top and bottom instead of '0' however you want...!!
Feb 2, 2011
View thangam nayagi 's Profile
thanks sir, i used these commands

margin-left:150px;
margin-right:150px;

in the #maincntr and got it aligned at the center sir, hope itz a good way...
Feb 1, 2011
View teacher siliconindia 's Profile
Change your system screen resolution, then check your design in browsers, then you can see your code is working or not
Feb 1, 2011
View teacher siliconindia 's Profile
Hi

Your code is fine, if you want any design to center write
margin-left: auto;
margin-right: auto;
and give width (ex:900px or 80%) it will work.

Regards
Feb 1, 2011