Advanced Search

Results 1 to 7 of 7

Thread: Centering The Div According To The Height Of The Page

  1. #1
    Join Date
    Jun 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Centering The Div According To The Height Of The Page

    Hi friends,

    I use a div on the page;

    Code:
    margin-left: auto;
    margin-right: auto;
    according to the width of each page to div with the codes center resolution.

    According to the height of the following codes mean when I use when I want to do;

    Code:
    margin-top: auto;
    margin-bottom: auto;
    or;

    Code:
    top: 50%;
    I use a div code to each page according to the resolution of the longitudinal center.

    Div centered according to the height of the page What do I do?

  2. #2
    Join Date
    Dec 2010
    Location
    Hyderabad, India
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Your post is very confusing, I am sorry. But what I understood was that you want a DIV to auto-align according to the height of the website. Is it not true that your website will be fixed in height due to the fixed height of your screen? No matter how long your page is, height of website is same at one glance at your computer screen.

    Please enlighten me as I tend to not clearly understand your post.

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,882
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. The Following User Says Thank You to Beverleyh For This Useful Post:

    HaLiLL (01-05-2011)

  5. #4
    Join Date
    Jun 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    @Beverleyh
    thank you.


    @VijayKanta
    you can see the sample and the coding by checking the source of the site
    make the browser window minimize and make it again bigger. you will understand what i mean

    http://fatihhayrioglu.com/dokumanlar..._ortalama.html

  6. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    The easiest way to center a div is putting something like this:

    <div style="position: absolute; left:30px; right: 30px; top: 30px; bottom: 30px">a div </div>

    You can replace the pixels with percentages.

    See also this blog.

    ===
    Arie Molendijk.

  7. #6
    Join Date
    Jan 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Excepting the Jquery outsource from Beverleyh this css forum thread, I do not see anything here that relates to liquid dimensioning. What if your center div is 50%of window vertical height and 75% of window width? To further obfuscate solution using CSS, what if your div has a border 2.5% of div width?

    I am not certain, but I think liquidity runs into snags. Perhaps browsers restructure the logical page in ways that interfere with fractional percentages. Some solution may rest in stretching an elastic child center div between two parent layers, one absolute and the other relative.
    Last edited by obfiscation; 01-09-2011 at 07:33 PM. Reason: inclusion, reference

  8. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    Quote Originally Posted by obfiscation View Post
    What if your center div is 50%of window vertical height and 75% of window width? To further obfuscate solution using CSS, what if your div has a border 2.5% of div width?
    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">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>Centered div</title>
    </head>
    <body>
    <div style="position: absolute; left:12.5%; right: 12.5%; top: 25%; height: 6.33%; background:red;"></div>
    
    <div style="position: absolute; left:12.5%; top: 25%; width: 3.33%; bottom: 25%;background:red;"></div>
    
    <div style="position: absolute; left:12.5%; right: 12.5%; bottom: 25%; height: 6.33%; background:red;"></div>
    
    <div style="position: absolute; right:12.5%; top: 25%; width: 3.33%; bottom: 25%;background:red;"></div>
    
    <div style="position: absolute; left:12.5%; right: 12.5%; top: 25%; bottom: 25%; "></div>
    
    </body>
    </html>
    Arie Molendijk

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
  •