Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS Web-Development CSS3 , +
I'm making a website but i got a little bit problem i tried a lot but won't found it to work..! hope you guys can do it..!
Question :
my site having a background color, 2 div and 1 table, and i want to make my site body to be in center and also it should be 100% in height, like yahoo answer's body is.
i had made external style sheet, i'm using CSS (Not css3)
Hope you guys can solve my problem thanks..!
Posted 9-Nov-12 4:04am

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Here is quick sample:
 
<!-- html -->
<html>
    <head></head>
    <body>
        <div class="main">
            <div class="heading">
                Heading here
            </div>
            <div class="nav">
                Navigation
            </div>
            <div class="content">
                content
            </div>
                <div class="footer">Footer here</div>
            <div>
 
    </body>
</html>
 
/*CSS*/
html, body{height:100%; width:100%}
.main{width:500px;height:100%;  margin:0 auto;border-right:1px solid #ddd; }
.heading{clear:both; height:6%;text-align:center;background-color:#eee}
.nav{height:90%;width:150px; float:left; background-color: #ddd;padding-left:5px;}
.footer{height:4%; background-color:#eee;clear:both;text-align:center;}
 
View it on jsfiddle jsfiddle full screen[^]
 
jsfiddle Source view [^]
 

Here is a simple version of the solution above with description:
 
1. to make sure that your website stay full width and height of the browser set the html and body tags to have 100% on both height and width. For visibility I have the website to look silver background
 

2. To make your main content stay always in the middle, set its width and give it a 'margin: 0 auto'. What this means is that your main content will have top and bottom 0 while its left and right adjust automatically with the browser width and stay centred. ('margin: 0 auto' is short for 'margin: 0 auto auto 0')
Again for visibility I have given the content area a white background
 

<!-- html -->
<html>
    <head>
    </head>
    <body>
        <div class="main">
            this is your main content, always centered
        </div>        
    </body>
</html>​
 
/*css*/
​html,body{
    height:100%;
    width:100%;
    background-color:silver
}
.main{
    height:100%;
    width:400px;
    margin:0 auto;
    background-color:white;
    padding:5px;
}
 
Here is the preview for this demo onjsfiddle[^]
  Permalink  
v3
Comments
Ashwin Pathak at 9-Nov-12 9:37am
   
@Eyaken This doesn't work, and it's not the solution for my website..! :(
Eyakem at 9-Nov-12 11:18am
   
You can now place any content inside the div that has .main class and your content will always be centred. Make sure to update the width:400px to suit your design.
Ashwin Pathak at 11-Nov-12 14:01pm
   
but it's not the thing which i want..! ok, but then also thanks..! :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Mobile
Web03 | 2.8.141220.1 | Last Updated 9 Nov 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100