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.

Member Avatar for rajarajan2017
<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.

Member Avatar for rajarajan2017

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.