...

View Full Version : horiz. center a div that has a defined 'top' position.



kberry
08-05-2011, 09:47 AM
Hi,

I have a div:


<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.

vikram1vicky
08-05-2011, 10:06 AM
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/

kberry
08-05-2011, 06:43 PM
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?

resdog
08-05-2011, 06:45 PM
to horizontally center a div, use:


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.

resdog
08-05-2011, 06:46 PM
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.

vikram1vicky
08-05-2011, 07:11 PM
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 :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum