centering a div block

without centering everything in it

Page 1 of 1

11 Replies - 3111 Views - Last Post: 10 June 2006 - 12:23 AM

#1 the_hangman  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 13
  • View blog
  • Posts: 602
  • Joined: 18-January 06

centering a div block

Posted 07 June 2006 - 06:40 PM

ok I have a bunch of div blocks inside of a "content" box. I want to center the "content" block without centering everything in it. I'm sure this is simple, but I dunno...

if I do <div id="content" align="center"> everything in the box centers (other div's). And if i do left:50%;margin-left:-100; when I resize the block goes off the right of the screen...

is there a better way to do this?

Is This A Good Question/Topic? 0
  • +

Replies To: centering a div block

#2 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1865
  • View blog
  • Posts: 20,278
  • Joined: 17-March 01

Re: centering a div block

Posted 07 June 2006 - 06:42 PM

Try margin: 0 auto 0 auto;
Was This Post Helpful? 0
  • +
  • -

#3 the_hangman  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 13
  • View blog
  • Posts: 602
  • Joined: 18-January 06

Re: centering a div block

Posted 07 June 2006 - 06:55 PM

in conjunction with what?

here is what I have
body {
background-color: #3a3d3d;
}

#menu {
background-image:url("images/fullmenu.jpg");
width:201px;
height:413px;
}

#content {
position:absolute;
left:50%;
margin: 0 auto 0 auto;
margin-left:-350px;
width:700;
height:auto;
border-width:2px;
border-style:solid;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Home</title>
	<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="content">

<div class="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
		   codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
		   width="670" height="328">
		  <param name="movie" value="Flash/header.swf">
		  <param name="quality" value="high">
		  <param name="menu" value="false">
		  <!--[if !IE]> <-->
		  <object data="Flash/header.swf"
			width="670" height="328" type="application/x-shockwave-flash">
			<param name="quality" value="high">
			<param name="menu" value="false">
			<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
	FAIL (the browser should render some flash content, not this).
		  </object>
		  <!--> <![endif]-->
		</object>
  </div>

<div id="menu"></div>


</div>
</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#4 the_hangman  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 13
  • View blog
  • Posts: 602
  • Joined: 18-January 06

Re: centering a div block

Posted 07 June 2006 - 06:56 PM

left:50%;
margin-left:-350px;

That part centers it just fine, but when you resize, it eventually disappears off the left side of the window
Was This Post Helpful? 0
  • +
  • -

#5 the_hangman  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 13
  • View blog
  • Posts: 602
  • Joined: 18-January 06

Re: centering a div block

Posted 07 June 2006 - 07:13 PM

nvm.. I got it..

I just put the whole thing in a <center> tag and then in the #menu css I added "position:relative; left:-245px;"
Was This Post Helpful? 0
  • +
  • -

#6 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: centering a div block

Posted 07 June 2006 - 09:15 PM

You shouldn't be using either the center element or the align attribute. Both are deprecated (out-dated) by the W3C in favor of CSS.

The way you use the code provided by skyhawk133 is:
<style type="text/css">
#container {
  margin-left: auto;
  margin-right: auto;
  margin: auto; /* equivalent to the previous two declarations */
  }
</style>

<div id="container">
</div>

Note that you must have a width set that's smaller than the screen for this to work. You must also be using a DTD and in particular one that doesn't put Internet Explorer 6 in quirks mode.
Was This Post Helpful? 0
  • +
  • -

#7 the_hangman  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 13
  • View blog
  • Posts: 602
  • Joined: 18-January 06

Re: centering a div block

Posted 08 June 2006 - 05:47 AM

Ok so I'm starting to get really pissed off at IE.
I look at this in FF and it's all nice and looks great and yay <Happy_Matt>
Attached Image
But then I look at it in IE and it still F*in' not centered and gRawR! </Happy_Matt>
Attached Image
I added some pics of it so you can see what it is doing...




I'll figure it out... just venting
Was This Post Helpful? 0
  • +
  • -

#8 1lacca  Icon User is offline

  • code.rascal
  • member icon

Reputation: 44
  • View blog
  • Posts: 3,822
  • Joined: 11-August 05

Re: centering a div block

Posted 08 June 2006 - 06:26 AM

Haven't chacked the code, so this whole thing might be bs...
As Skyhawk said, margin: 0 auto should work. However I think it only works in FF. If I remember correctly, it's an IE bug, and a quick and dirty hack is to set the text-aligment attribute of the containing element, and it will affect all elements, not just text in it. Naturally you'll have to set the text-alignment in your element again, to overwrite the effect of inheritance.
Was This Post Helpful? 0
  • +
  • -

#9 the_hangman  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 13
  • View blog
  • Posts: 602
  • Joined: 18-January 06

Re: centering a div block

Posted 08 June 2006 - 06:33 AM

IE has more bugs than my backyard...


well the 'margin: 0 auto' thing worked great. but I also had to set the DTD to
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



like arbitrator said. It works now, but changing the DTD isn't going to cause me problems later will it?
Was This Post Helpful? 0
  • +
  • -

#10 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: centering a div block

Posted 09 June 2006 - 04:33 AM

View Post1lacca, on 8 Jun, 2006 - 05:18 AM, said:

Haven't chacked the code, so this whole thing might be bs...
As Skyhawk said, margin: 0 auto should work. However I think it only works in FF.

Incorrect. It will work in Internet Explorer 6 so long as it's not displaying in quirks mode. That is, so long as you have a document type declaration (DTD) that makes IE display the page in that browser's version of standards mode. Also note that if you use an XHTML DTD, using the XML prolog before a DTD that would normally put IE in standards mode will put it into quirks mode instead (Internet Explorer doesn't understand true XHTML).

Quote

It works now, but changing the DTD isn't going to cause me problems later will it?
It shouldn't cause you any problems unless you want to validate and also use code prohibited under the XHTML Strict DTD (such as the target attribute and iframe element). It'll make your page display in standards mode in Internet Explorer and the standards browsers which will make it easier to code cross-browser compatible pages.
Was This Post Helpful? 0
  • +
  • -

#11 1lacca  Icon User is offline

  • code.rascal
  • member icon

Reputation: 44
  • View blog
  • Posts: 3,822
  • Joined: 11-August 05

Re: centering a div block

Posted 09 June 2006 - 12:22 PM

View PostArbitrator, on 9 Jun, 2006 - 12:25 PM, said:

Incorrect. It will work in Internet Explorer 6 so long as it's not displaying in quirks mode. That is, so long as you have a document type declaration (DTD) that makes IE display the page in that browser's version of standards mode. Also note that if you use an XHTML DTD, using the XML prolog before a DTD that would normally put IE in standards mode will put it into quirks mode instead (Internet Explorer doesn't understand true XHTML).

Well, looks-like my disclaimer was in place :) Maybe it was in IE5, maybe only in my dreams...
Was This Post Helpful? 0
  • +
  • -

#12 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: centering a div block

Posted 10 June 2006 - 12:23 AM

View Post1lacca, on 9 Jun, 2006 - 11:14 AM, said:

Well, looks-like my disclaimer was in place :) Maybe it was in IE5, maybe only in my dreams...
The method you described is the method you have to use in IE5 alright. But most people could care less about that browser; otherwise you also have to compensate for its broken box model.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1