Member Avatar for veledrom

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
  • 279 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by digital29

Recommended Answers

All 10 Replies

Member Avatar for urtrivedi 
<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 because: n/a
Member Avatar for veledrom

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>
Member Avatar for urtrivedi

if you still want it in middle then you must set width to 100%

<style="width:100%">

Member Avatar for veledrom

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

Member Avatar for MidiMagic

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 because: n/a
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>
Member Avatar for Rajib Ganguly

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.

Member Avatar for veledrom

It has been solved with rajarajn07's example. Thanks

Also, thanks for all who has contributed.

Member Avatar for digital29

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.