How do I center a container in my HTML/CSS?


Tags: html,css,layout

Problem :

I have developed a website as part of my assignment. As I am new to html/css I could not figure some problems out of my code. The assignment specifications says that the screen size should be in certain size so that majority browsers can open it and the user should not experience any scroll activties. So I have used div to divide the whole page to fit the size. However, the container(In my code named as 'box') is set to the left side of the brower body and I have to set it centred, but I do not know how to fix it. Can anyone give me some help, please and thank you.

My HTML:

<!DOCTYPE html>
<html>
<head>
<title>habibe Naby</title>
<link rel="stylesheet" href="Websystems.css">
</head>
<body>
<div id="box">
    <div id="header">
     <img id="image" src="spring.jpeg">
     <p id="text">Welcome to My Homepage</p>
    </div>

    <div id="under">
            <div id="upper">
                    <div id="leftbar">
                            <div class="list">
                            <ul>
                                    <li><a href="../index.html">Home</a></li>
                                            <li><a href="past.html">Past</a></li>
                                            <li><a href="future.html">Future</a></li>
                                            <li><a href="comments.html">Comments</a>   

                                    </li>
                             </ul>
                            </div>
                    </div>
                    <div id="rightbar">
                    <div  id="title">Habibe Naby</div>
                       <p>this is my name and                           

                        I<spanclass="special">Danny</span>.Ihave    a .. </p>
                    </div>
            </div>
  <div id="footer">copyrights&copy</div>
  </div>

My CSS:

body
{
    height: 750px;
    margin: 2px;
    padding: 2px;
    width: 1000px;
}


#box 
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    height:100%;
    border:1px solid #8D8D8D;
}


#header 
{
    height: 150px; 
    width: 100%;
    position: relative;
}


#image 
{
    height: 150px; 
    width: 1000px;
}


#text 
{
    z-index: 100; 
position: absolute;    
color: darkolivegreen; 
    font-style: italic;
font-size: 32px;
font-weight: bolder;
left: 300px; 
top: 25px;
}

#leftbar
{
    float: left;
    width: 200px;
    height: 560px; 
    margin: 0px;
    padding: 0px;
    background-color: azure;
}

.list
{ 
    margin-top: 40px;
    margin-left: auto;  
    text-decoration: underline;
    color:blueviolet; 
    font-size: 20px; 
}


.list ul 
{
    list-style: none; 
}

#rightbar 
{
    float: right;
    width: 800px;
    height: 560px;
    margin: 0px;
    padding: 0px;
    background: mintcream;
}

#title 
{
    margin-left: 80px; 
    margin-top: 30px;
    font-size: 28px;
    font-weight: normal;
    font-style: italic;
    color: blueviolet;
}


#footer 
{
    clear: both;
    height: 40px;
    text-align: center;
    background-color: oliveDrab;
    margin 0px;
    padding: 0px;
    color: white;
}

.special
{
    font-size: 20px; 
    font-weight: bold;
    font-family: "New Century Schoolbook", Times, sans-serif;
    color: dodgerblue;
} 


p, pre
{
    padding: 10px 20px;
    margin-left: 50px;
    margin-right: 50px;
    color: darkslateblue;
 }


Solution :

Jsfiddle: http://jsfiddle.net/2gtsK/show/

Removed width from body, Added margin:0 auto to #box

margin:0 auto is same as:

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

.

body
{
    height: 750px;
    margin: 2px;
    padding: 2px;
}


#box 
{
    width: 1000px;
    margin: 0 auto;
    height:100%;
    border:1px solid #8D8D8D;
}

    CSS Howto..

    How to script CSS to achieve hide/appear effect based on hover

    Given an url, how could a script find what resources are loaded?

    how to get a grid of different sizes using css and javascipt

    How to import a CSS file from an external bundle resource

    how to create table grid view fix header with long title name using only CSS?

    How to apply a line wrap/continuation style and code formatting with css

    how to make a CSS animation end point the right edge of the browser

    How to extend the background of a CSS-arrow to the whole page width?

    How to access this children div

    How to align images and urls within div trees in CSS?

    Angular show / hide with animation

    How does CSS 'overflow:hidden' work to force an element (containing floated elements) to wrap around floated elements?

    Meteor: how to style useraccounts

    How do I make a horizontal list of inline elements stack vertically when the div container is resized?

    How to make a div to fit all available width even hidden with scroll?

    CSS How to embed several Font-Weights at once

    How to skew image with CSS?

    How do I get my Bootstrap webpage to have a full width

    How to add border for html tr

    jquery ui droppable : how to dropp an element outside a div with overflow:hidden?

    How can I make a scrolling DIVs background transparent?

    CSS - How to select nth-child of form element?

    Css how to set 3 block block/div's in one line [closed]

    how to cope with text to element alignment issues

    css: how to make
    not highlighted when selecting text (in Chrome)

    How can I style the current (today's date) in bold font?

    How to get partial scroll bar in html page?

    How to set one CSS rule for two tags?

    How to align multiple images in a table cell vertically?

    How Do you combine CSS code to an HTML code? I want to Combine them? [closed]