SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy problems with a horizontally centred layout in CSS

    Hi,
    I am having a lot of trouble with getting a horizontally centred layout to work. I am using the following code file I found on the internet as a starting point:

    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen"><!--
    body {
    background-color: #e1ddd9;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
    color:#564b47;
    padding:20px;
    margin:0px;
    text-align: center;
    }
    #content {
    text-align: left;
    vertical-align: middle;
    margin: 0px auto;
    padding: 0px;
    width: 550px;
    background-color: #ffffff;
    border: 1px dashed #564b47;
    }
    p, h1, pre {
    margin: 0px;
    padding: 5px 10px;
    }
    h1 {
    font-size: 11px;
    text-transform:uppercase;
    text-align: right;
    color: #564b47;
    background-color: #90897a;
    }
    a {
    color: #ff66cc;
    font-size: 11px;
    background-color:transparent;
    text-decoration: none;
    }
    --></style></head>
    <body>
    <div id="content">
    <p><b>center a FIXED BOX</b><br /><br />
    This BOX has a fixed width.<br />
    It is centered and adjusts to the browser window.<br />
    The height adjusts to the content.<br />
    <a href="/">more nice and free css templates</a><br />
    </p>

    <p>
    <img src="xhtml10.gif" alt="" width="80" height="15" border="0"/> <img src="css.gif" alt="" width="80" height="15" border="0"/>
    </p>
    </div>
    </body>
    </html>


    this code works fine but the problem I have is when I add in more divs to the content div for segmenting my page content (for example to add in a header or an image gallery) essentially I am trying to position these new divs using absolute positioning but what seems to be happening is they are positioning from the body rather than the content div. This means I am unable to control where I want the elements on the page. I have also tried relative positioning but this doesnt help either!
    I am very new to CSS but from the research I have done on the web the important line in the CSS above is:

    margin: 0px auto; on the #Content div to control the horizontal positioning

    Any help that anyone could give me would be much appreciated as I am going crazy trying to work out where I am going wrong!! If you require any other information to help me please let me know and I will see what I can add.

    many thanks in advance
    Hayden

  2. #2
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Can you post a link to the site? You can't post live links yet (you need to have 5 posts to post links), but you can write it like this:

    www dot example dot com slash mysite dot html
    and we can go from there.

  3. #3
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there, I havent got the site up and running yet, am still just building on my home computer. I have copied the code that I am trying to get to work below. The result I want is that the header and ImgGall divs are positioned within the container div. (along with any other divs that I may need!) hope this makes sense!

    Thanks
    Hayden

    <html>
    <head>
    <title>Floren and Gilder</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen"><!--

    body {
    background-color: #AAB29C;
    /*padding:20px;
    margin:0px;*/
    text-align: center;
    }
    #container {
    margin: 0px auto;
    width: 750px;
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #564b47;
    padding: 0px;
    }

    #ImgGall {
    position: absolute;
    left: 100px;
    top: 125px;
    }

    #header {
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    height: 125px;
    }
    --></style></head>
    <body>
    <div id="container">

    <div id="header">
    <img src="images/Horse2.png" class ="feature" width="123" height ="125"/>
    </div> <!-- end of header div -->

    <div id="ImgGall">
    <img src="images/bag3.jpg" width="600" height="415" />
    </div> <!-- end of ImgGall div -->





    </div> <!-- end of container div -->
    </body>
    </html>

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, if you want the absolute positioned item to be relative to that div give the content div a position:relative to establisih a new stacking context for the absolutely positioned element

    I assume you know you don't have a doctype
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks mate that has worked a treat and saved my sanity!!

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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