Centering DIV Tags

PseudZ · Jun 3, 2008

Hellos
Im wondering if anyone knows anything about centering of div tags in html, using Visual Web Developer.
I hate using tables, they just annoying, i find it easier to use divs but they wont center on the screen when viewed in the browser..
Is there anyway to use divs, perhaps using divs inside one big centered table?
Or setting margin properties for the divs?
Any help is appreciated
Thanks

sn3rd · Jun 3, 2008

Sorry to say, but div tags' "align" attribute is deprecated, so you should use tables (although I get that you don't want to).

JAV · Jun 3, 2008

I assume you want to have the div be the "holder" for the main content of the page, then the following should work:

<div style="width:90%;margin-left:5%;">some text here</div>

Just remember the margin-left value should be halve of 100%-width%, i.e. (100% - width%)/2 = margin-left%

PseudZ · Jun 3, 2008

I do have them aligned in the centre
I make a holder ass said above and then place everything in side, then set position to relative and it works perfectly.. but in ie 6 only not in firefox or opera.. Is there a solution around this?

Deenem · Jun 3, 2008

<center><div style="width:80%;"> Hello World </div></center> , would work.

I hate tables too...

PseudZ · Jun 3, 2008

i got it working thanks

The Axe Dude · Jun 3, 2008

Another way to do it, in a style sheet of course

, would be to have:

#divname
{
margin: 0px auto;
}

That will center the div

=Scorp1on= · Jun 3, 2008

You can either do it with inline styles or with a seperate CSS sheet.

I don't use inline too much but for example:

HTML:

<div style="width: 80%; margin: 10px auto 0 auto;"</div>

Width can be set in pixels (900px - Good if you want a fixed website size can help in some cases) or percent (80% - if you want it to stretch to a certain percentage of the viewers screen)

Or with a seperate CSS file things can be much neater, example:

To link to your CSS you will enter the following between your <head></head> tags:

HTML:

<link rel="stylesheet" type="text/css" href="StyleSheet.css" />

And your style sheet will look as follows:

Code:

#container {
width: 900px;
margin: 10px auto 0 auto;
}

(Very Basic CSS. CSS can be very advanced and do wonders)

Then your HTML file should look like this:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Name</title>
    <link rel="stylesheet" type="text/css" href="StyleSheet.css" />
</head>

<body>
    <div id="container"> (This sets your div to work on all the text between this tag and the closing </div> with the id you made in the CSS [#container])
    <p> Lorem ipsum dolar sit amet... random latin...</p>
</div>
    
</body>

</html>

Edit: And after all that... you got it working lol. Have fun.

.Froot. · Jun 3, 2008

I usually use tables too, then just chuck div tags inside of them. Makes for easier development later on.

chiskop · Jun 4, 2008

The Axe Dude said:
Another way to do it, in a style sheet of course , would be to have:

#divname
{
width:800px;
margin: 0px auto;
}

That will center the div

This is what I would do, except that you have to declare the width of #divname.

The Axe Dude · Jun 4, 2008

chiskop said:
This is what I would do, except that you have to declare the width of #divname.

Oh yeah...forgot about the width

PseudZ · Jun 5, 2008

Thanks

another thing is how would you go about putting all the divs inside one big table?
Say centre the table the align divs to the table

.Froot. · Jun 5, 2008

You could do that too, but I never do it in my sites. The outermost thing I have is a div and then a table inside with more div's.

The Axe Dude · Jun 5, 2008

As in:

<table>
<tr>
<td>
<div="divname"></div>
</td>
</tr>

</table>

?

Note: This is highly horrible and invalid

Centering DIV Tags

PseudZ

Expert Member

sn3rd

Expert Member

JAV

Well-Known Member

PseudZ

Expert Member

Deenem

Expert Member

PseudZ

Expert Member

The Axe Dude

Senior Member

=Scorp1on=

Active Member

.Froot.

Executive Member

chiskop

Executive Member

The Axe Dude

Senior Member

PseudZ

Expert Member

.Froot.

Executive Member

The Axe Dude

Senior Member