CSS - Center DIV

**ober0330** · Jul 23rd, 2004, 01:45 PM

How do I make a DIV centered on the page, but down a certain amount? If I use absolute positioning, it's going to move it to a given place on the screen, but I need to allow for different widths of the screen. And I need to have the top of the div at 150 px from the top of the window.

Solution?

**Acidic** · Jul 23rd, 2004, 04:58 PM

This won't work perfectly, but I don't know of a better way.

Code:

.myDiv {
position: absolute;
top: 150 px;
left: 40%;
}

adject the left depending on how wide the div is.

**Ecniv** · Jul 26th, 2004, 02:59 AM

if the container has centered text (text-align: center

the div 'should' be centered (although firefox appears not to do this).
As to the space above, well if there is nothing else there, use a margin?

Vince

**Acidic** · Jul 26th, 2004, 06:17 AM

try using top-margin: 150px;
not sure about the centering though.

**ober0330** · Jul 26th, 2004, 07:58 AM

I think what I'm going to do is nest the divs and have the first one centered and base it off of that, since I'll know the width of the container.

**techgnome** · Jul 26th, 2004, 10:23 AM

as some one's who just done this....

margin-left: auto;
margin-right: auto;
top: 15px; /* or what ever distance you want... or yo ucould use margin-top: xxxxx */

TG

**ober0330** · Jul 26th, 2004, 11:15 AM

That doesn't work for my application, because my margins are wider than the div.

**CornedBee** · Jul 26th, 2004, 01:03 PM

Ecniv, this behaviour is a bug of IE5 and IE6 in quirks mode.

ober, what do you mean by "margins are wider than the div"?

**ober0330** · Jul 26th, 2004, 01:36 PM

Well, unless I misunderstand the purpose and position of divs, my div is not the width of the page, so changing the margins of the page would not affect the location of my div.

Maybe I'm not understanding something here.... either way, I still can't get it to work. I have 2 divs and I want them to appear in the same position on the page. (centered, and approximately 150px down). One is hidden while the other is not.

The way it works at the moment is that they are stacked on top of each other, no matter what is hidden or visible. So when the top one is hidden, I have a lot of white space before you get to the second div.

Maybe divs are the wrong tool to be using?

**Ecniv** · Jul 27th, 2004, 04:09 AM

ahh ok thanks cornedbee, I was wondering why it didn't appear to work in Firefox. Any really good website(s) to help me code better since ie is crap in some things and firefox is also crap in some things...? Probably means my current sites are useless to all but IE users

Code:

<html>
<head>
<style type='text/css'>
body {
	color: #fff;
	background: #000;
	margin: 0;
	padding: 0;
}
div#first { 
	margin-left: 20%;
	margin-right: 20%;
	margin-top: 150px;
	width: 60%;
	height: 100px;
	border: solid 1px #0f0;
}
div#second {
	margin-left: 20%;
	margin-right: 20%;
	margin-top: -100px;
	width: 60%;
	height: 100px;
	border: solid 1px #0f0;
	visibility: hidden;
}
</style>

<script language='javascript'>
function doSwap(x) {
	if (x==0) {
		window.document.all.first.style.visibility = 'Hidden';
		window.document.all.second.style.visibility = 'Visible';
	}else{
		window.document.all.first.style.visibility = 'Visible';
		window.document.all.second.style.visibility = 'Hidden';
	}
}
</script>

</head>
<body>
<a href='#' onClick='doSwap(1);Return;'> First </a>&nbsp;<a href='#' onClick='doSwap(0);Return;'> Second </a>
<div id='first'>First Div</div>
<div id='second'>Second Div</div>
</body>
</html>

The above is rough code (I assume this the type of thing you are trying) to do a div swap - it errors, but works... on this IE at work. Dunno about firefox or the rest, but worth a quick go.

I expect Cornedbee has a better example.

Vince

**CornedBee** · Jul 27th, 2004, 04:54 AM

To center a block-level element it needs a given width and you do:

Code:

container_of_div {
  /* Because IE5 doesn't support the margin stuff */
  text-align: center;
}

div.centered {
  width: somevalue; (can be %, px, whatever)
  margin-left: auto;
  margin-right: auto;
  /* Counteract the container. */
  text-align: left;
}

And actually Firefox is crap in very, very few things. There's practically nothing that IE supports that Firefox doesn't support, exmpting only proprietary stuff.

Some good URLs:
http://css-discuss.incutio.com/
especially
http://css-discuss.incutio.com/?page...ngBlockElement

http://www.quirksmode.org/

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

**ober0330** · Jul 27th, 2004, 09:21 AM

ahhhhhhhh! I can't win! I get it to work in Opera, and then it looks like **** in IE!

I was so close

**ober0330** · Jul 27th, 2004, 09:35 AM

Ok, here's what I have:

CSS:

Code:

.cdiv {
  width: 100%; 
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: absolute;
  top: 100px;
}

.cdivcontain {
	text-align: center;
	width: 100%;
}

HTML/PHP:

PHP Code:


echo "<div class='cdivcontain' align='center'>";

        echo "<div class='cdiv' id='div2' style='visibility:hidden'>"; 

        experiments($header);

        echo "</div>";

        echo "<div class='cdiv' id='div1' style='visibility:visible'>";

Right now, it is exactly where it needs to be in Opera. In IE, it sits on the right of the screen, half showing, half not. Using "text-align:left" makes it show up left aligned (obviously) and it looks horrible.

Any idea how I can fix this in IE without screwing it up in the other browsers??

**ober0330** · Jul 27th, 2004, 09:39 AM

Fabulous. I just tried it in Firefox, and Firefox puts it in between Opera and IE. ***?

**Jop** · Jul 27th, 2004, 02:50 PM

You might try it this way:

css:

Code:

body{
		margin: 0;
		padding: 0;
		text-align: center;
	}
	.cdiv{
		position: relative;
		width: 100%;
		top: 100px;
		margin: 0 auto;
	}
	.cdiv#first{
		display: none;
	}

javascript:

Code:

	<script type="text/javascript">
	function doSwap(x) {
		if (x==0) {
			document.getElementById("first").style.display = 'none';
			document.getElementById("second").style.display = 'block';
		}else{
			document.getElementById("first").style.display = 'block';
			document.getElementById("second").style.display = 'none';
		}
	}
	</script>

and the html

Code:

<a href='#' onClick='doSwap(1);Return;'> First </a> <a href='#' onClick='doSwap(0);Return;'> Second </a>
    <div class="cdiv" id="first">
		first div
	</div>
	<div class="cdiv" id="second">
		second div
	</div>

Tested in IE 6, Opera 7 and Firefox 0.9, all works.

Working example can be found here:
http://validweb.nl/vbforums/center.html

enjoy!

**ober0330** · Jul 27th, 2004, 04:34 PM

I may have to try that... I thought about using a Javascript setup, but thought it would be more work than that.

Thread: CSS - Center DIV

Thread Tools

Display

CSS - Center DIV

Posting Permissions