Center Allignment for a tableless design

**subha20** · 08-19-2006, 06:30 AM

Hi everybody,

I am very new to this forum. I am now trying the tableless design using DIV and CSS. I have got sucess a little bit to make a design as such but my problem is I can't make the design come center of the IE or any other browser.

I want to make my design(tableless) centered Alligned

Regards
Subha

**mwinter** · 08-19-2006, 04:33 PM

See Centring using CSS, by David Dorward.

Mike

**boogyman** · 08-19-2006, 07:09 PM

Code:

<style type="text/css">
<!--
body {
      margin: 0 auto;
      width: 600px;
      text-align: left;
}
// -->
</style>

where width = the width you want your stuff is.
text-align is there to ensure that all of your text is aligned on the left

**mwinter** · 08-19-2006, 07:24 PM

Originally Posted by pissa

text-align is there to ensure that all of your text is aligned on the left

The text-align property is there because you included it, but you don't understand why. If you read the article I cited in my post, you'd realise why the text-align property with a value of left might be used when attempting to centre block-level content, and that it's not necessary with the code you posted.

If you'd also paid attention the last time you posted something like this, you would have hopefully heeded my advice to omit the comment declarations inside style (and script) elements, and not to suggest pixel dimensions.

Mike

**subha20** · 08-22-2006, 12:59 PM

Thanks for the replies. I want the whole tableless page design should come at the center position of the browser. like the code we use for normal html layout like

<html>
<head>
<title>welcome</title>
</head>
<body>
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td> </td>
</tr>
</table>

<body>
</html>

I have used diff n types of CSSs like

#menu {
position: absolute;
height: 114px;
width: 143px;
left: 0px;
top: 0px;
}

and divs

<div id="menu"> <img src="images/seo-home.gif"> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('about','','images/seo-about-on.gif',1)"><img src="images/seo-about.gif" alt="About SEO-Manchester" name="about" width="31" height="114" border="0"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','images/seo-contact-on.gif',1)"><img src="images/seo-contact.gif" alt="Contact SEO-Manchester" name="contact" width="32" height="114" border="0"></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('services','','images/manchester-seo-on.gif',1)"><img src="images/manchester-seo-services.gif" alt="SEO-Services" name="services" width="31" height="114" border="0"></a> 
</div>

I want to allign the design at the center of the browser

**mwinter** · 08-22-2006, 01:04 PM

Code:

#wrapper {
    margin: 0 auto;
    width: ??em;
}

Replace the question marks (?) with an appropriate value. You could use pixels, but em length values are preferable because they are proportional to font size. Likely values are somewhere between 30em and 50em.

HTML Code:

<body>
    <div id="wrapper">
        <!-- document content goes here -->
    </div>
</body>

Mike

Thread: Center Allignment for a tableless design

Thread Tools

Search Thread

Center Allignment for a tableless design

The center allignment at browser (IE, Firefox)

Bookmarks

Bookmarks

Posting Permissions