Centering DIV Tags

Giarc86

Giarc86

Expert Member
Joined
May 28, 2008
Messages
1,243
Reaction score
4
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
 
Sorry to say, but div tags' "align" attribute is deprecated, so you should use tables (although I get that you don't want to).
 
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%
 
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?
 
<center><div style="width:80%;"> Hello World </div></center> , would work.

I hate tables too...
 
Another way to do it, in a style sheet of course :P, would be to have:

#divname
{
margin: 0px auto;
}

That will center the div :)
 
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.
 
I usually use tables too, then just chuck div tags inside of them. Makes for easier development later on.
 
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
 
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.
 
As in:

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

</table>

?

Note: This is highly horrible and invalid :)
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X