Jump to content

[SOLVED] Centralising Content Using A DIV Tag??

stublackett

By stublackett
in CSS Help

 Share

Recommended Posts

stublackett Advanced Member

stublackett

Posted
Posted

Hi,

 

I've got a DIV Titled "Container"

 

I'd like it to centralise the page content, But at the moment its sitting on the left hand side of the page ???

 

How do I change that container DIV to suit?

 

The code I've got at the mo is :

 

#container {
position:relative;
margin: 0 auto;
}

 

The HTML Is like this :

<div id="container">
  <div align="left">
    <table width="30%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><div align="center"><img src="images/header-top.png" width="765" height="58" /></div></td>
      </tr>
      <tr>
        <td><table width="40%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td background="images/side-left.png"><img src="images/spacer.png" width="44" height="205" /></td>
              <td><table width="60%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td><img src="images/admin-header.jpg" alt="Cornhill On Tweed - Admin Section" width="768" height="181" /></td>
                  </tr>
                <tr> <!--CMS Content -->
                  <td height="159" bgcolor="#FFFFFF">
                    <div id="news">
                      <img src="images/title-news.png" alt="news"/>
                      <ul>
                        <li><a href="addnews.php" title="Add News">Add News </a></li>
                      <li><a href="modifynews.php" title="Edit News">Edit News</a> </li>
                      <li><a href="modifynews.php" title="Delete News">Delete News</a></li>
                      <li><a href="spring-archive.php" title="View Spring Archive">View Spring Archive</a></li>
                      <li><a href="summer-archive.php" title="View Summer Archive">View Summer Archive</a></li>
                      <li><a href="autumn-archive.php" title="View Autumn Archive">View Autumn Archive</a></li>
                      <li><a href="winter-archive.php" title="View Winter Archive">View Winter Archive</a></li>
                    </ul>
                    </div>
        <div id="whats-on">
          <img src="images/title-whats.png" alt="Whats On"/>
          <ul>
            <li><a href="../events.php" title="Upcoming Events">Upcoming Events</a></li>
    <li><a href="addevent.php" title="Add Event">Add Event</a></li>
    <li><a href="modifyevents.php" title="Edit Event">Edit Event</a></li>
    <li><a href="modifyevents.php" title="Delete Event">Delete Event</a></li>
    <li></li>
    </ul>
        </div> 
    <div id="directory"> 
      <img src="images/title-directory.png" alt="Directory"/>               
      <ul>
        <li><a href="adddirectory.php" title="Add To The Directory">Add To The Directory</a></li>
    <li><a href="../directory.php" title="View The Directory">View The Directory</a></li>
    <li><a href="editdirectory.php" title="Edit Directory Items">Edit Directory Items</a></li>
    <li><a href="deletedirectory.php" title="Delete Directory Items">Delete Directory Items</a></li>
    <li></li>
    </ul>
    </div>
    <p><a href="../index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image19','','images/menu-buts/home-over.jpg',1)"><img src="images/menu-buts/home-up.jpg" alt="Home" name="Image19" width="89" height="40" border="0" id="Image19" /></a><a href="../news.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','images/menu-buts/news-over.jpg',1)"><img src="images/menu-buts/news-up.jpg" alt="News" name="Image20" width="160" height="40" border="0" id="Image20" /></a><a href="../community.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','images/menu-buts/community-over.jpg',1)"><img src="images/menu-buts/community-up.jpg" alt="Community" name="Image21" width="124" height="40" border="0" id="Image21" /></a><a href="../thingstodo.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','images/menu-buts/things-over.jpg',1)"><img src="images/menu-buts/things-up.jpg" alt="Things To Do" name="Image22" width="152" height="40" border="0" id="Image22" /></a><a href="../directory.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','images/menu-buts/directory-over.jpg',1)"><img src="images/menu-buts/dir-up.jpg" alt="Directory" name="Image23" width="123" height="40" border="0" id="Image23" /></a><a href="../contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','images/menu-buts/contact-over.jpg',1)"><img src="images/menu-buts/contact-up.jpg" alt="Contact" name="Image24" width="117" height="40" border="0" id="Image24" /></a><br />
      <br />
      <br />
      <br />
      </p>
                    <p> </p>
                    <p> </p>
                    <p>  </p>
                    <p> </p>
                    <p> </p>
                    <p> </p>
                    <p><br />                 
                    </p></td>
                  </tr> <!--END CMS Content-->
                <tr>
                  <td height="19" valign="bottom"><div align="center"><span class="style14">All Content © Cornhill Parish Council 2008 · Website by <a href="http://www.fpwebdesign.com" target="_blank">Fantasy Web Design</a> </span></div></td>
                  </tr>
                <tr>
                  <td height="37" background="images/footer.png" bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="2%"> </td>
                          <td width="98%"><div align="left" id="footer"><span class="style5">HOME | COMMUNITY | WHAT'S ON | DIRECTORY | LINKS | CONTACT | <a href="index.html">ADMIN</a></span></div></td>
                        </tr>
                    </table></td>
                  </tr>
              </table></td>
              <td background="images/side-right.png"><img src="images/spacer.png" width="44" height="205" /></td>
            </tr>
        </table>      </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
    </table>
  </div>
</div>

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

You have to set a width on the container. When no width is set on a div, it extends to the left and right and fills its containing element entirely. So the margin auto has nothing to work with. Once you set the width of the div as smaller than its containing element, margin auto has something to work with, and will place the div in the center.

 

And you are using centralise the wrong way as a side point. You want to use 'center' in this case, as in 'center the div'.

Link to comment
Share on other sites
karldesign Member

karldesign

Posted
Posted

if you want it to work in opera, not that many people develop that far across browsers, you will need to do,

 

margin-top:0; margin-right:auto; margin-bottom:0; margin-left:0;

 

Some opera browsers do not read the shorthand very well. Not too sure about newer versions.

Link to comment
Share on other sites
secoxxx Newbie

secoxxx

Posted
Posted

try this. all of it. you shouldnt be using tables.

 

 

#container {
margin: 0 auto;
width:856px;
}
#cms_content {
margin: 0 auto;
width:768px;
float:left;
}
#left_side {
    float:left;
width:44px;
height:100%;
background-image:url(images/spacer.png);
background-repeat:repeat-y;
}
#right_side {
    float:left;
width:44px;
height:100%;
background-image:url(images/spacer.png);
background-repeat:repeat-y;
}
#footer_top {
             clear:both;
text-align:center;
}

 

<div id="container">
<div align="center"><img src="images/header-top.png" width="765" height="58" /></div>
<div align="center"><img src="images/admin-header.jpg" alt="Cornhill On Tweed - Admin Section" width="768" height="181" /></div>
<div id="left_side"></div>
<div id="cms_content">
<div id="news">
                      <img src="images/title-news.png" alt="news"/>
                      <ul>
                        <li><a href="addnews.php" title="Add News">Add News </a></li>
                      <li><a href="modifynews.php" title="Edit News">Edit News</a> </li>
                      <li><a href="modifynews.php" title="Delete News">Delete News</a></li>
                      <li><a href="spring-archive.php" title="View Spring Archive">View Spring Archive</a></li>
                      <li><a href="summer-archive.php" title="View Summer Archive">View Summer Archive</a></li>
                      <li><a href="autumn-archive.php" title="View Autumn Archive">View Autumn Archive</a></li>
                      <li><a href="winter-archive.php" title="View Winter Archive">View Winter Archive</a></li>
                    </ul>
    </div>
        <div id="whats-on">
          <img src="images/title-whats.png" alt="Whats On"/>
          <ul>
            <li><a href="../events.php" title="Upcoming Events">Upcoming Events</a></li>
    <li><a href="addevent.php" title="Add Event">Add Event</a></li>
    <li><a href="modifyevents.php" title="Edit Event">Edit Event</a></li>
    <li><a href="modifyevents.php" title="Delete Event">Delete Event</a></li>
    <li></li>
    </ul>
        </div> 
    <div id="directory"> 
      <img src="images/title-directory.png" alt="Directory"/>               
      <ul>
        <li><a href="adddirectory.php" title="Add To The Directory">Add To The Directory</a></li>
    <li><a href="../directory.php" title="View The Directory">View The Directory</a></li>
    <li><a href="editdirectory.php" title="Edit Directory Items">Edit Directory Items</a></li>
    <li><a href="deletedirectory.php" title="Delete Directory Items">Delete Directory Items</a></li>
    <li></li>
    </ul>
    </div>
    <p align="center"><a href="../index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image19','','images/menu-buts/home-over.jpg',1)"><img src="images/menu-buts/home-up.jpg" alt="Home" name="Image19" width="89" height="40" border="0" id="Image19" /></a><a href="../news.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','images/menu-buts/news-over.jpg',1)"><img src="images/menu-buts/news-up.jpg" alt="News" name="Image20" width="160" height="40" border="0" id="Image20" /></a><a href="../community.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','images/menu-buts/community-over.jpg',1)"><img src="images/menu-buts/community-up.jpg" alt="Community" name="Image21" width="124" height="40" border="0" id="Image21" /></a><a href="../thingstodo.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','images/menu-buts/things-over.jpg',1)"><img src="images/menu-buts/things-up.jpg" alt="Things To Do" name="Image22" width="152" height="40" border="0" id="Image22" /></a><a href="../directory.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','images/menu-buts/directory-over.jpg',1)"><img src="images/menu-buts/dir-up.jpg" alt="Directory" name="Image23" width="123" height="40" border="0" id="Image23" /></a><a href="../contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','images/menu-buts/contact-over.jpg',1)"><img src="images/menu-buts/contact-up.jpg" alt="Contact" name="Image24" width="117" height="40" border="0" id="Image24" /></a>
</div>

<div id="right_side"></div>
<div align="center" id="footer_top"><span class="style14">All Content © Cornhill Parish Council 2008 · Website by <a href="http://www.fpwebdesign.com" target="_blank">Fantasy Web Design</a> </span></div>
<div align="center" id="footer"><span class="style5">HOME | COMMUNITY | WHAT'S ON | DIRECTORY | LINKS | CONTACT | <a href="index.html">ADMIN</a></span></div>
</div>

 

give it a shot.

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted
second: you'll need to use text-align:center for IE browsers. They dont recognzie margin: 0 auto correctly.

 

I've never seen margin: 0 auto not work on IE 6 and 7. It's worked every time for me.

 

Text-align isn't good because it's not text that is being centered, it's an element, which makes it non-semantic, and also requires a reset for any child elements as the text-align is inherited by the children.

Link to comment
Share on other sites
dannyb785 Member

dannyb785

Posted
Posted

second: you'll need to use text-align:center for IE browsers. They dont recognzie margin: 0 auto correctly.

 

I've never seen margin: 0 auto not work on IE 6 and 7. It's worked every time for me.

 

Text-align isn't good because it's not text that is being centered, it's an element, which makes it non-semantic, and also requires a reset for any child elements as the text-align is inherited by the children.

 

It's just a big I've always run into.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.