2 Replies Latest reply on May 11, 2006 3:23 PM by Newsgroup_User

    Centering with CSS inside a div box

    Level 7
      Am subbing on a job, would appreciate help:
      I am trying to center the three columns inside the address box at the bottom
      of the page.

      http://www.mariagrist.net/dev/motors/bodyshop.htm

      It should look just like the box at the bottom of the main page
      http://www.mariagrist.net/dev/motors/default.html but with content centered.
      I copied the divs from the default.htm but am changing them in order to try
      to center the content. So far I have only made it worse because now the
      columns are all on top of each other.
      Thanks


        • 1. Re: Centering with CSS inside a div box
          Level 7
          Pixel Warrior wrote:

          > Am subbing on a job, would appreciate help:
          > I am trying to center the three columns inside the address box at the bottom
          > of the page.
          >
          > http://www.mariagrist.net/dev/motors/bodyshop.htm
          >
          > It should look just like the box at the bottom of the main page
          > http://www.mariagrist.net/dev/motors/default.html but with content centered.
          > I copied the divs from the default.htm but am changing them in order to try
          > to center the content. So far I have only made it worse because now the
          > columns are all on top of each other.
          > Thanks
          >
          >
          First off you need to change all thress <div class="address_item_content
          divided"> to <div class="address_item_content"> Just drop the 'divided'
          part.

          Next you need to wrap the three newly nmed <divs> 'address_item_content'
          <divs> in another wrapper. See the code below (scroll down) I've named
          it 'addressHolder'

          Find your .address_item_content css and make sure it looks the same as this:

          .address_item_content {
          float: left;
          width: 115px;
          padding-left: 30px;
          margin-top: 16px;
          font-size: 11px;
          border-left: 1px solid #000;
          }

          add the addressHolder css to your stylesheet.

          #addressHolder {
          width: 438px;
          margin: 0 auto;
          }



          Heres the section of code starting and ending with the
          'address_box_content' <div>

          Note to get rid of the 1px solid dividing line on the left of the first
          'address_item_content' <div> use some inline css styling
          'style="border-left: none;" plus <br style-"clear: both;"> has been
          inserted after the 'addressHolder'<div> to pull the
          'address_box_content' <div> around the three addresses.


          CODE

          <div id="address_box_content">
          <div id="addressHolder">
          <div class="address_item_content" style="border-left: none;">
          <div id="content_title">DERWENT PARK</div>
          8c Lampton Ave<br>
          Ph: 03 6211 0660<br>
          </div>

          <div class="address_item_content">
          <div id="content_title">DEVONPORT</div>
          6-8 Victoria Pde<br>
          Ph: 03 6420 4531<br>
          </div>

          <div class="address_item_content">
          <div id="content_title">BURNIE</div>
          60-65 Marine Tce<br>
          Ph :03 6430 2440<br>
          </div>
          </div><!-- end addressHolder -->
          <br style="clear: both;">
          </div><!-- end address_box_content -->

          • 2. Re: Centering with CSS inside a div box
            Level 7
            Thanks heaps, that's exactly what I wanted it to do.
            Aren't these forums just magnificent.

            "Osgood" <notavailable@atthisaddress.com> wrote in message
            news:e3unv3$4og$1@forums.macromedia.com...
            > Pixel Warrior wrote:
            >
            >> Am subbing on a job, would appreciate help:
            >> I am trying to center the three columns inside the address box at the
            >> bottom of the page.
            >>
            >> http://www.mariagrist.net/dev/motors/bodyshop.htm
            >>
            >> It should look just like the box at the bottom of the main page
            >> http://www.mariagrist.net/dev/motors/default.html but with content
            >> centered.
            >> I copied the divs from the default.htm but am changing them in order to
            >> try to center the content. So far I have only made it worse because now
            >> the columns are all on top of each other.
            >> Thanks
            > First off you need to change all thress <div class="address_item_content
            > divided"> to <div class="address_item_content"> Just drop the 'divided'
            > part.
            >
            > Next you need to wrap the three newly nmed <divs> 'address_item_content'
            > <divs> in another wrapper. See the code below (scroll down) I've named it
            > 'addressHolder'
            >
            > Find your .address_item_content css and make sure it looks the same as
            > this:
            >
            > .address_item_content {
            > float: left;
            > width: 115px;
            > padding-left: 30px;
            > margin-top: 16px;
            > font-size: 11px;
            > border-left: 1px solid #000;
            > }
            >
            > add the addressHolder css to your stylesheet.
            >
            > #addressHolder {
            > width: 438px;
            > margin: 0 auto;
            > }
            >
            >
            >
            > Heres the section of code starting and ending with the
            > 'address_box_content' <div>
            >
            > Note to get rid of the 1px solid dividing line on the left of the first
            > 'address_item_content' <div> use some inline css styling
            > 'style="border-left: none;" plus <br style-"clear: both;"> has been
            > inserted after the 'addressHolder'<div> to pull the 'address_box_content'
            > <div> around the three addresses.
            >
            >
            > CODE
            >
            > <div id="address_box_content">
            > <div id="addressHolder">
            > <div class="address_item_content" style="border-left: none;">
            > <div id="content_title">DERWENT PARK</div>
            > 8c Lampton Ave<br>
            > Ph: 03 6211 0660<br>
            > </div>
            >
            > <div class="address_item_content">
            > <div id="content_title">DEVONPORT</div>
            > 6-8 Victoria Pde<br>
            > Ph: 03 6420 4531<br>
            > </div>
            >
            > <div class="address_item_content">
            > <div id="content_title">BURNIE</div>
            > 60-65 Marine Tce<br>
            > Ph :03 6430 2440<br>
            > </div>
            > </div><!-- end addressHolder -->
            > <br style="clear: both;">
            > </div><!-- end address_box_content -->
            >