Hi,
I want to align this layout in the middle of the web page. How can I do it? I don't want to use table.
Thanks in advance
<html>
<head></head>
<body>
<div id="container">
<div id="header">Header bits go here</div>
<div id="content">Content bits go here</div>
<div id="footer">Footer bits go here</div>
</div>
</body>
</html><html>
<head></head>
<body>
<div id="container" >
<div id="header" align="center">Header bits go here</div>
<div id="content" align="center">Content bits go here
<div id="footer" align="center">Footer bits go here</div>
</div>
</body>
</html>Thanks for prompt answer.
When I set width, it moves to left.
<html>
<head></head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#CCDDEE">
<div align="center">Header bits go here</div>
</div>
<div id="content" style="background-color:#CCCCCC">
<div align="center">Content bits go here</div>
</div>
<div id="footer" style="background-color:#997755">
<div align="center">Footer bits go here</div>
</div>
</div>
</body>
</html>if you still want it in middle then you must set width to 100%
<style="width:100%">
I've seen it somewhere but I cannot find it where it was. I don't want it to cover whole screen.
It depends on the content. Use these styles
Use
text-align: center;for text. That is the only thing the W3C allows centering of.
To center a photo, use
clear: both; text-align: center:. The last style is to make it work with IE.
To center something else, use
margin-left: auto; margin-right: auto; text-align: center;. Again, the last makes it work with IE, which for some reason wants both.
<html>
<head>
<title>
DEMA.COM
</title>
<style>
body {
background-color:black;
font-family:terminal;
color:#2D5B89;
text-align: center;
}
#page {
width:750px;
height:400px;
text-align: left;
}
</style>
</head>
<body>
<div id="page">
<img src="menubar.gif" border="0"/>
This is the page contents.
</div>
</body>
</html>Another option is to make in center by CSS, but before that be sure that the page is xhtml1.0
code is : margin:0 auto;
hope it will help.
Hi veledrom,
I hope you got the result. If yes, mark it as solved.
It has been solved with rajarajn07's example. Thanks
Also, thanks for all who has contributed.
try <center> and after </center> in html
strange and old, but it works
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.