Click here to Skip to main content
11,802,762 members (67,795 online)
Rate this: bad
Please Sign up or sign in to vote.
See more: CSS CSS3 web-dev
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 3:04am

1 solution

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

Solution 1

Here is quick sample:

<!-- html -->
        <div class="main">
            <div class="heading">
                Heading here
            <div class="nav">
            <div class="content">
                <div class="footer">Footer here</div>
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 -->
        <div class="main">
            this is your main content, always centered
    margin:0 auto;

Here is the preview for this demo onjsfiddle[^]
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)

  Print Answers RSS
0 KrunalRohit 366
1 OriginalGriff 365
2 F-ES Sitecore 295
3 Afzaal Ahmad Zeeshan 230
4 CPallini 230
0 OriginalGriff 2,950
1 Maciej Los 1,910
2 KrunalRohit 1,862
3 CPallini 1,695
4 Richard MacCutchan 1,157

Advertise | Privacy | Mobile
Web03 | 2.8.151002.1 | Last Updated 9 Nov 2012
Copyright © CodeProject, 1999-2015
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