How do I position a div element using css and how do I make my web page look the same in all browsers?
Posted on January 2nd, 2010 by admin
Say I make a div class called "maincontent", how do I position that container in the center of the page? And how do I make my web page look the same in all browsers (or just the main 3) without re writing all my code from scratch??
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Test Page</title>
<style type="text/css">
<!–
#maincontainer {
width: 1003px;
margin-right: auto;
margin-left: auto;
background-color: #CCCCCC;
}
–>
</style>
</head>
<body>
<div id="maincontainer">Your Contents will be here</div>
</body>
</html>
Dont forget to add the Doctype on top. While creating your html, preview in all browsers once u add anything to the code. Dont wait until you finish the page….
January 2nd, 2010 at 12:24 pm
If you just want to center the div horizontally that’s simple, in your css, give the div a fixed width like: width:800px; then make the left and right margins auto like this: margin:0 auto;
Now if you also want to center it vertically you’re going to have a problem. That would require giving it a fixed height, and using some javascript to figure out what the height of the browser window is for each computer screen.
And lastly to make your page look the same in all browsers it requires adhering to coding standards, following a strict DOCTYPE and trial and error. Don’t use any fancy tags that are only supported by a few browsers, use only the ones that are part of the W3C standards.
Use this DOCTYPE at the top of every page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
And make sure your code validates and you’ll be WELL on your way to getting to look the same in all browsers.
References :
January 2nd, 2010 at 1:08 pm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Test Page</title>
<style type="text/css">
<!–
#maincontainer {
width: 1003px;
margin-right: auto;
margin-left: auto;
background-color: #CCCCCC;
}
–>
</style>
</head>
<body>
<div id="maincontainer">Your Contents will be here</div>
</body>
</html>
Dont forget to add the Doctype on top. While creating your html, preview in all browsers once u add anything to the code. Dont wait until you finish the page….
References :
Good Luck Buddy