Results 1 to 3 of 3

Thread: Centring divs in css?

  1. #1
    FPCH New Member
    Join Date
    Jan 2011
    Posts
    9

    PC Experience:
    Some Experience


    Operating System:
    Windows 7- Professional

    Default Centring divs in css?

    I am making a website called http:\\Browser choice however my page seems to been on the right or left hand side of the page. Anyone got any ideas how to fix this?

  2. #2
    FPCH New Member
    Join Date
    Jan 2009
    Posts
    4

    PC Experience:
    Some Experience


    Operating System:
    Windows XP - Professional

    Default

    Hi Xillius,

    Right i realise this thread is way out of date, however it way come in handy for others.

    Example: Your html page.

    Doc type etc.
    <Html>
    <title> Your page name</title>
    <body>
    <div id="container"> <!-- some designers call it wrapper all content of your page goes between this div. -->

    <div id="head"> <!-- for your page heading could be picture or just text or both.

    etc etc.



    </div> <!-- end of head section-->

    </div> <!-- end of container div. -->
    </body>
    </html>
    save page as yourPage.html.
    CSS code. in new page

    Example of centering div.
    * {margin:0px; //this wild card selector stops white space at top browser.
    padding:0px; }

    #container {
    width:900px;
    height:900px;
    border:1px solid #000000; //black border all around the edge.
    margin:5px auto; // 5px in from left & right of browser auto centers it top and bottom of page.
    }

    #Head {
    { position:absolute; //sets the head in the container 90px from top of page and sets colour
    width:900px;
    height:90px;
    background-color:#b4eeb4;
    or u could set a background-image:url (yourpicture.jpg); // check your picture size is same or smaller than

  3. #3
    FPCH New Member
    Join Date
    Jan 2009
    Posts
    4

    PC Experience:
    Some Experience


    Operating System:
    Windows XP - Professional

    Default

    From stormingnorm.

    Sorry but there was alot more code which i completed and clicked save changes at bottom of page.

    but the whole page of code has not appeared and it took a little while to completed.

    Sorry it looks like you have only got half the story and did not get the answer to your ? which was further down the page

    My applogies for incomplete tutorial.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •