Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning <div> layers...

    I'm fairly new to coding with with css and layers. Haven't done much design recently and am coming out of the ice age with some of this css stuff. I am trying to create a site that has two boxes...one that is about 700px wide and 500px tall, and a smaller one that sits inside of it. I want both to be centered in the screen regardless of the resolution (not too worried about anything below 1024x768). So the second box would be centered inside the first, which is centered on the screen.

    What is the best way to do this?? Am I allowed to use percentages in the top and left properties for a div? Or is there another tag I would need to use? Thanks...

  • #2
    Regular Coder
    Join Date
    May 2007
    Posts
    118
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi bonzovt,

    try this code:

    Code:
    <style>
    body {text-align: center}
    #div1 {border:1px dashed red; text-align:left; margin:0 auto; width:700px; height:500px;}
    #div2 {border:1px dashed orange; text-align:left; margin-left:175px; width:350px; height:250px;}
    </style>
    
    <div id="div1">
    content
    <div id="div2">content</div>
    </div>
    Forum for webmasters and developers
    http://www.htmlfrenzy.com
    Are you an IT expert? Join our Reward system
    www.htmlfrenzy.com/reward-system.php

  • #3
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, that worked for centering width wise. i am also going to try centering horizontally, so that i everything will be completely centered in the screen...especially at higher resolutions.

    i start by creating a css table that is 100% the width and height of the screen, and then valign=middle the one row. is that not the best way to do this? is using one table cell not the best way to do this?

    i have an image that is a 'title' for the page with links on it, and want the rectangle within a rectangle centered within the other below the title image. i'm thinking that i should be focusing on <div>'s here, but the only way i can think of doing it is treating the whole page as one table cell.

    probably just css ignorance...

  • #4
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    margin: auto;
    Last edited by CoNt3MpT; 05-19-2007 at 05:14 AM.
    I'm not saying there should be capital punishment for Stupidity, but how about we take the safety labels off things and let the problem solve itself.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by bonzovt View Post
    ok, that worked for centering width wise. i am also going to try centering horizontally, so that i everything will be completely centered in the screen...especially at higher resolutions.

    i start by creating a css table that is 100% the width and height of the screen, and then valign=middle the one row. is that not the best way to do this? is using one table cell not the best way to do this?

    i have an image that is a 'title' for the page with links on it, and want the rectangle within a rectangle centered within the other below the title image. i'm thinking that i should be focusing on <div>'s here, but the only way i can think of doing it is treating the whole page as one table cell.

    probably just css ignorance...
    A table is NOT the way to go here. Get the idea out of your head that everything requires a table. Try this
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <
    html>
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    title>Centered Vertically and Horizontally</title>
    <
    style type="text/css">
    htmlbody {
    height:100%; /*we need this so #container can have a height of 100%*/
    margin:0;
    padding:0;
    }
    #container { /*this allows the box to be visible on the screen at all times, without it #div1 would start moving off the viewport to the left*/
    width:702px;
    position:relative/*this allows us to control #div1 because the nearest relative element is used as a reference*/
    margin:auto;
    height:100%; /*without this #div1 doesn't know what 50% of #container is since no height is set*/
    }
    #div1 {
    border:1px dashed red;
    margin:auto;
    width:700px;
    height:500px;
    position:absolute/*in conjunction with the below top, left, margin-top, and margin-left allows us to center this both horizontally and verticall*/
    top:50%; /*this doesn't change*/
    left:50%; /*this doesn't change*/
    margin-top:-250px/*this is half the height*/
    margin-left:-350px/*this is half the width*/
    }
    #div2 {
    border:1px dashed orange;
    width:350px
    height:250px;
    margin:125px auto 0/*used to center vertically and horizontally in #div1, content can only go into #div2 or layout will break*/
    }
    </
    style>
    </
    head>
    <
    body>
    <
    div id="container">
        <
    div id="div1">
            <
    div id="div2"></div>
        </
    div>
    </
    div>
    </
    body>
    </
    html
    @Contempt thats not going to do anything vertically.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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