6 Replies Latest reply: May 23, 2014 2:42 AM by griffij76 RSS

    center 5 div tags

    griffij76 Community Member

      I have 5 floating div tags inside another div tag . I am trying to centre the 5 tags in there it centre s the first one so pushes the others outside the containing tag I have tried using CSS

        • 1. Re: center 5 div tags
          Nancy O. CommunityMVP

          Is your math is correct?  Are you testing in real browsers?  Design View isn't accurate.

          Alt-Web Demos :: 3 CSS Boxes with Floats and Margins

           

           

          Nancy O.

          • 2. Re: center 5 div tags
            osgood_ CommunityMVP

            <!DOCTYPE HTML>

            <html>

            <head>

            <meta charset="UTF-8">

            <title>Untitled Document</title>

            <style>

             

            #imageWrapper {

            text-align: center;

            width: 90%;

            max-width: 980px;

            margin: 0 auto;

            background-color:#CCC;

            }

            .imageBox {

            width: 150px;

            height: 125px;

            display: inline-block;

            background: red;

            margin: 5px;

            }

            </style>

            </head>

             

            <body>

             

            <div id="imageWrapper">

              <div class="imageBox"></div>

              <div class="imageBox"></div>

              <div class="imageBox"></div>

              <div class="imageBox"></div>

              <div class="imageBox"></div>

            </div>

             

            </div>

            </body>

            </html>

            • 3. Re: center 5 div tags
              MurraySummers CommunityMVP

              Brilliant!

              • 4. Re: center 5 div tags
                griffij76 Community Member

                I am sorry if this appears long winded but I have put the code underneath. The bit I am trying to centre is the NameBar with the name tags in it I have highlight the portions I want to centre in bold.

                 

                Thanks in advance Joel

                 

                Code

                 

                <!doctype html>
                <html>
                <head>
                <meta charset="utf-8">
                <title>Countdown Timer</title>
                <style type="text/css">
                body {
                margin-left: 0px;
                margin-top: 0px;
                margin-right: 0px;
                margin-bottom: 0px;
                }
                #container {
                padding: 0px;
                height: auto;
                margin-right: auto;
                margin-left: auto;
                border-width: 0px;
                border-style: solid;
                background-color: #CCCCCC;
                }
                #Holder {
                height: auto;
                width: 980px;
                margin-right: auto;
                margin-left: auto;
                border-style: solid;
                background-color: #FFFFFF;
                }
                #Header {
                height: 340px;
                width: 980px;
                margin-right: auto;
                margin-left: auto;
                border-width: 0px;
                border-style: solid;
                background-image:url(Website%20Images/Final%20Images/Logo/New%20disney_main_logo_large.fw .png);
                background-repeat:no-repeat;
                background-position:center;


                }
                #Banner {
                height: 62px;
                width: 980px;
                margin-right: auto;
                margin-left: auto;
                border-width: 0px;
                border-style: solid;
                text-align: center;
                font-size: 60px;
                font-family: times Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
                color: #2A3296;
                }
                #NameBar {
                height: 51px;
                width: 980px;
                margin: 0px auto;
                border-width: 0px;
                border-style: solid;
                padding-top: 0px;
                padding-right: 0px;
                padding-bottom: 0px;
                padding-left: 50%;

                #In {
                ;  text-align: center;
                left: auto;
                right: Auto;
                vertical-align: baseline;
                vertical-align: middle;
                }
                #In {
                padding: 0px;
                height: 51px;
                width: 980px;
                margin-right: auto;
                margin-left: auto;
                border-width: 0px;
                border-style: solid;
                }
                #TimeRemaining {
                padding: 0px;
                height: 150px;
                width: 980px;
                margin-right: auto;
                margin-left: auto;
                border-width: 0px;
                border-style: solid;
                }
                #Entersite {
                padding: 0px;
                width: 980px;
                margin-right: auto;
                margin-left: auto;
                border-width: 0px;
                border-style: solid;
                }
                #wrapper {
                }
                #Footer {
                padding: 0px;
                height: 30px;
                margin-right: auto;
                margin-left: auto;
                border-width: 0px;
                border-style: solid;

                }

                #NameBar {
                padding: 100x;
                height: 51px;
                width: 980px;
                margin-right: auto;
                margin-left: auto;
                border-width: 0px;
                border-style: solid;
                }
                #NamePaige {
                padding: 0px;
                height: 45px;
                width: 100px;
                margin-right: auto;
                margin-left: auto;
                border-width: 0;
                border-style: 0;
                float: left;


                }
                #NameRachel {
                padding: 0px;
                height: 45px;
                width: 100px;
                margin-right: auto;
                margin-left: auto;
                border-width: 0;
                style: solid;
                float: left;
                }

                #NameAaron {
                padding: 0px;
                height: 45px;
                width: 100px;
                margin-right: auto;
                margin-left: auto;
                border-width: 0;
                border-style: solid;
                float: left;
                }

                #NameKerry {
                padding: 0px;
                height: 45px;
                width: 100px;
                margin-right: auto;
                margin-left: auto;
                border-width: 0;
                style: solid;
                float: left;
                }

                #NameJoel {
                padding: 0px;
                height: 45px;
                width: 100px;
                margin-right: auto;
                left: auto;
                width:0
                style: solid;
                float: left;
                }

                </style>
                </head>

                <body>
                <div id="container">
                  <div id="wrapper">
                    <div id="Holder">
                      <div id="Header"></div>
                      <div id="Banner"> Welcomes</div>
                      <div id="NameBar">
                        <div id="NamePaige">Paige</div>
                        <div id="NameRachel">Rachel</div>
                        <div id="NameAaron">Aaron</div>
                        <div id="NameKerry">Kerry</div>
                        <div id="NameJoel">Joel</div>
                      </div>
                      <div id="In">IN</div>
                      <div id="TimeRemaining">TIME REMAINING</div>
                      <div id="Entersite">CLICK TO ENTER</div>
                    </div>
                    <div id="Footer">COPYRIGHT INFORMATION</div>
                  </div>
                </div>
                </body>
                </html>

                • 5. Re: center 5 div tags
                  osgood_ CommunityMVP

                  Use the css below for the page. I've given you the whole list again as there was a couple of errors which needed correcting. The NEW  css styles are at the bottom of the list (2 of them). I've combined the name <divs> into 1 css selector as it's easier to manage.

                   

                  body {

                  margin-left: 0px;

                  margin-top: 0px;

                  margin-right: 0px;

                  margin-bottom: 0px;

                  }

                  #container {

                  padding: 0px;

                  height: auto;

                  margin-right: auto;

                  margin-left: auto;

                  border-width: 0px;

                  border-style: solid;

                  background-color: #CCCCCC;

                  }

                  #Holder {

                  height: auto;

                  width: 980px;

                  margin-right: auto;

                  margin-left: auto;

                  border-style: solid;

                  background-color: #FFFFFF;

                  }

                  #Header {

                  height: 340px;

                  width: 980px;

                  margin-right: auto;

                  margin-left: auto;

                  border-width: 0px;

                  border-style: solid;

                  background-image:url(Website%20Images/Final%20Images/Logo/New%20disney_main_logo_large.fw .png);

                  background-repeat:no-repeat;

                  background-position:center;

                  }

                  #Banner {

                  height: 62px;

                  width: 980px;

                  margin-right: auto;

                  margin-left: auto;

                  border-width: 0px;

                  border-style: solid;

                  text-align: center;

                  font-size: 60px;

                  font-family: times Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;

                  color: #2A3296;

                  }

                  #In {

                  text-align: center;

                  left: auto;

                  right: Auto;

                  vertical-align: baseline;

                  vertical-align: middle;

                  }

                  #In {

                  padding: 0px;

                  height: 51px;

                  width: 980px;

                  margin-right: auto;

                  margin-left: auto;

                  border-width: 0px;

                  border-style: solid;

                  }

                  #TimeRemaining {

                  padding: 0px;

                  height: 150px;

                  width: 980px;

                  margin-right: auto;

                  margin-left: auto;

                  border-width: 0px;

                  border-style: solid;

                  }

                  #Entersite {

                  padding: 0px;

                  width: 980px;

                  margin-right: auto;

                  margin-left: auto;

                  border-width: 0px;

                  border-style: solid;

                  }

                  #wrapper {

                  }

                  #Footer {

                  padding: 0px;

                  height: 30px;

                  margin-right: auto;

                  margin-left: auto;

                  border-width: 0px;

                  border-style: solid;

                   

                  }

                  #NameBar {

                      width: 100%;

                      text-align: center;

                  }

                  #NamePaige, #NameRachel, #NameAaron, #NameKerry, #NameJoel {

                      width: 100px;

                      height: 45px;

                      display: inline-block;

                  }

                  • 6. Re: center 5 div tags
                    griffij76 Community Member

                    Thank you Nancy

                     

                    I have changed what you suggested however they have centred but one under the other without using the float? I am very new to this so I am sorry if I am asking very basic questions.

                     

                    Thank you once again Joel