HTMLHelp Forums > Centering div layers with CSS

Full Version: Centering div layers with CSS

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

Frosty

Apr 24 2007, 05:09 PM

Hey everyone,

I was wondering if anyone would be able to help me figure out the code that will allow me to centre div layers in Dreamweaver 8? I've read around and figured out that I need to use CSS, but I don't know where to put the CSS code in relation to the div etc.

So, I have my layer (and the rest of the site):

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<div id="Layer1"></div>
</body>
</html>

I understand that the relevant bit is the CSS bit, but I'm not sure to do with it.

I've realised that absolute is not the way to go from this thread here on some other forum:

Sorry if it's not allowed to link to other sites btw - feel free to edit it out :S

http://www.daniweb.com/techtalkforums/thread60286.html

But that just confuses me even further, and I have no idea what to do.

Any and all help would be much appreciated.

Thanks everyone,
Andrew

JamieHarrop

Apr 24 2007, 05:12 PM

Andrew, are you trying to position the div in the center of the page both horizontally and vertically, or just horizontally?

If the latter, it is quite simple to do, but if you want the div to be in the middle both horizontally and vertically, it's going to take some crafty CSS.

Let us know which option you want, and we'll try our best to help.

Frosty

Apr 24 2007, 05:15 PM

Thanks so much for the pretty much immediate response.

It's simply horizontally that I need it. I don't even want to think how vertically would work, lol.

Thanks again,
Andrew

JamieHarrop

Apr 24 2007, 05:35 PM

In that case, this should be quite simple. The idea is to give #Layer1 a defined width, then use "margin: auto;" to position it to the center.

Change your #Layer1 CSS to the following:

CODE

#Layer1 {
width:200px;
height:115px;
margin: auto;
}

Then put some test content inside <div id="Layer1"></div> and you should see it in the center.

If it doesn't work, then there will be something else within your code that is stopping it from working and we'll need to see all the code within your document (Or see the page itself) to determine what the problem is.

Frederiek

Apr 25 2007, 02:28 AM

Frosty, I think you'll find better explanations, than from the url you provided, at http://www.d.umn.edu/itss/support/Training....html#centering.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.