ansaurus

Question

Answer 1

A:

you can't do this with a div element unless it has a specified width.

for just text, you can use

<div style="text-align: center;">text content</div>

Robert Greiner 2009-12-02 20:31:13

Answer 2

A:

Hi Keiron, this should work for you:

The CSS:

body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
color:#564b47;
margin: 20px 140px  20px 140px;
text-align: center;
}
#content {
width: 100%;
padding: 0px;
text-align: left;
background-color: #fff;
overflow: auto;
}

The HTML:

<body> 
<div id="content"> 
<p><b>center</b><br /><br /> 
This BOX ist centered and adjusts itself to the browser window.<br /> 
The height ajusts itself to the content.<br /> 
</div> 
</body>

This example was taken from this site, which I found a while ago and always refer to it for nice simple, clean css templates: http://www.mycelly.com/

Dave Paroulek 2009-12-02 20:34:10

Answer 3

A:

Have a play with this

body    {
  text-align: center;
  position: relative; 
}

#content    {
  width: 100%;
  height: auto;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

Then in the HTML

<html>
<body>
<div id="header"></div>
<div id="content">
    <!-- place all of your content inside of here  -->
</div>
</body>
</html>

Matt Joslin 2009-12-02 20:35:02

@Matt the `margin-left` and `margin-right` do nothing meaningful because the width is `100%`.

Doug Neiner 2009-12-02 20:46:00

Answer 4

+1 A:

I'm going out on a limb and guess that the background color/imagery is 100% wide, but you want the actual content to be centered (with a fixed width?). Here is sample code that uses an internal wrapper div on each item to keep internal content centered. I would recommend doing something totally different and possibly using repeating backgrounds on the html and body elements, but I don't know what your page looks like.

So.., the following will work, but will alarm HTML purists because of the extra markup :)

You can view a (super ugly) example of this method on this sample page I put together.

CSS:

.wrapper {
   width: 960px; /* fixed width */
   margin: 0 auto; /* center */
}

HTML:

<div id="header">
   <div class="wrapper">
   <h1>My Title</h1>
   </div>
</div>
<div id="content">
   <div class="wrapper">
   <h2>Sub Title</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
      do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat.</p>
   </div>
</div>
<div id="footer">
   <div class="wrapper">
   <p class="credits">Copyright 2009 by Your Company.com, LLC</p>
   </div>
</div>

Doug Neiner 2009-12-02 20:44:00

ansaurus

tags:

views:

answers:

Wrapper DIV in 100% width website.

related questions