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 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    80
    Thanks
    13
    Thanked 0 Times in 0 Posts

    horiz. center a div that has a defined 'top' position.

    Hi,

    I have a div:
    Code:
    <div id="about" class="contact_form" style="z-index:10;"> <a class="close" onclick="return false" title="Close" alt="Close"></a> 
      <form id='about_form' name='about_form'>
    <br><br>
    	<img src="images/about/cmc_logo.png" class="about_logo">
    	<!--#include file="form-about_desc.html" -->	
      </form>
    </div>
    </body>
    That has the following CSS:

    #about {
    position: absolute;
    top: 140px;
    color: #fff;
    padding: 15px;
    width: 580px;
    z-index: 1;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background-color: #f2f2f2;
    line-height:12px;
    z-index:2;
    }

    I like it being 140 px from the top, and at the moment, if I take away 'position' and 'top' it completely breaks my site (which may just mean I need to rework some of my div coding site-wide).

    I'm wondering if there's a simple way to horizontally center these divs without "text-align:center"-ing my <body> CSS, as that would muck up a bunch of formatting.

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    You should ignore positioning until there is no other alternate is available...

    Following are links to understand box model. use standard box model to design layout:

    http://css-tricks.com/2841-the-css-box-model/

    http://www.quirksmode.org/css/box.html

    http://www.brainjar.com/css/positioning/

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    80
    Thanks
    13
    Thanked 0 Times in 0 Posts
    So you're saying I shouldn't include any positioning CSS in my CSS unless absolutely necessary? Because right now, it seems like it's necessary, at least in some cases, as if I remove the poisitioning, it pushes a number of elements lower than they should be, and stacks elements incorrectly in the z-index. If it's due to bad coding, what is the general solution to that? What am I likely doing wrong?

  • #4
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    to horizontally center a div, use:
    Code:
    margin: 0 auto;
    It's the second item "auto" that will be centering. As long as your div has a defined width, this will work.

    When you position:absolute something, you are taking it out of the flow of the document structure. Therefore, if you remove the position:absolute, you are putting it back in, so of course there will be issues.

  • #5
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    Quote Originally Posted by kberry View Post
    So you're saying I shouldn't include any positioning CSS in my CSS unless absolutely necessary? Because right now, it seems like it's necessary, at least in some cases, as if I remove the poisitioning, it pushes a number of elements lower than they should be, and stacks elements incorrectly in the z-index. If it's due to bad coding, what is the general solution to that? What am I likely doing wrong?
    If you are to be using z-index, you have to use positioning. I think vikram1vicky just means that you shouldn't just default to using positioning if there are other ways to accomplish the same task.

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by kberry View Post
    So you're saying I shouldn't include any positioning CSS in my CSS unless absolutely necessary? Because right now, it seems like it's necessary, at least in some cases, as if I remove the poisitioning, it pushes a number of elements lower than they should be, and stacks elements incorrectly in the z-index. If it's due to bad coding, what is the general solution to that? What am I likely doing wrong?
    Have you gone through the links I shared?? Once You will understand positioning , you will get your answer

    All the best


  •  

    Posting Permissions

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