0

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>
6
Contributors
10
Replies
17
Views
7 Years
Discussion Span
Last Post by digital29
0
<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>

Edited by urtrivedi: n/a

0

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>
0

I've seen it somewhere but I cannot find it where it was. I don't want it to cover whole screen.

0

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.

Edited by MidiMagic: n/a

0
<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>
0

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.

0

It has been solved with rajarajn07's example. Thanks

Also, thanks for all who has contributed.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.