4 Replies Latest reply on May 10, 2010 12:54 PM by Charlie3001

    Aligning text to left and right of header - please help!

    Charlie3001

      Hi, I'm a Dreamweaver newbie and am having problems aligning text on a header...

       

      The header itself has a background image, and I have created three divs that sit on top of this image (or at least that was my aim!) with text showing on the top left and and top right of the header. This renders perfectly in design view, but in live view or on a browser, the right hand text appears below the left hand text.

       

      I've tried everything I can think of to move the right hand text over to where it should be but with no success! I have a feeling that it might be something to do with the image, but have tried changing the size of just about everything and tweaking padding etc.

       

      This is the code - header_text1 is the text I am trying to move:

       

      <div id="header">

          <div class="twoColHybLtHdr" id="header_text">Southbourne Studio<br />

          St Catherine's Road<br />

          Southbourne</div>

           <div id=column container>

           <div id="header_text1">Email: info@SpringPilates.co.uk<br />

          Phone: </div>

          <div id=center column></div>

          </div>

          </div>

       

      CSS:

       

      #header {

      height: 130px;

      background-color: #FFC;

      background-position: center center;

      width: 968px;

      background-image: url(Images/Leaf%20pattern%20text.png);

      }

      }

      #header_text {

      padding-top:2px;

      font-family: Georgia, "Times New Roman", Times, serif;

      font-size: 14px;

      color: #363;

      float: left;

      height: 50px;

      width: 210px;

      padding-left: 2px;

      }

      }

      #header_text1 {

      padding-top:2px;

      font-family: Georgia, "Times New Roman", Times, serif;

      font-size: 14px;

      color: #363;

      height: 40px;

      width: 316px;

      float: right;

      text-align: right;

      padding-right: 2px;

      }

      #center_column {

      width: 316px;

      margin-left: 10px;

      }

      Any help very much appreciated!

        • 1. Re: Aligning text to left and right of header - please help!
          osgood_ Level 8

          Re arrange the code so the right <div> comes before the left <div> as below:

           

           

          <div id="header">
          <div id="header_text1">Email: info@XXXXXXXXXX.co.uk<br />

          Phone: </div>

          <div class="twoColHybLtHdr" id="header_text">Southbourne Studio<br />

          St Catherine's Road<br />

          Southbourne</div>

          <div id=column container>

          <div id=center column></div>

          </div>

          </div>

           

           

          I've blanked your email out otherwise it might attract spam.

          • 2. Re: Aligning text to left and right of header - please help!
            Charlie3001 Level 1

            Thank you - but I'm now getting the right hand text showing on the left on top of the left hand text so still not quite right! Any more ideas?

             

            (PS, thank you re email address - I remembered to delete the number but forgot the address!)

            • 3. Re: Aligning text to left and right of header - please help!
              osgood_ Level 8

              Try the below, cut and paste into a new Dreamweaver document. You had some extra closing brackets in your css that was most likely stopping the css cascade.

               

               

               

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
              <title>Untitled Document</title>
              <style>
              #header {

               

              height: 130px;

               

              background-color: #FFC;

               

              background-position: center center;

               

              width: 968px;

               

              background-image: url(Images/Leaf%20pattern%20text.png);

               

              }

               

               

               

              #header_text {

               

              padding-top:2px;

               

              font-family: Georgia, "Times New Roman", Times, serif;

               

              font-size: 14px;

               

              color: #363;

               

              float: left;

               

              height: 50px;

               

              width: 210px;

               

              padding-left: 2px;

               

              }

               

               

               

              #header_text1 {

               

              padding-top:2px;

               

              font-family: Georgia, "Times New Roman", Times, serif;

               

              font-size: 14px;

               

              color: #363;

               

              height: 40px;

               

              width: 316px;

               

              float: right;

               

              text-align: right;

               

              padding-right: 2px;

               

              }

               

              #center_column {

               

              width: 316px;

               

              margin-left: 10px;

               

              }</style>
              </head>

               

              <body>
              <div id="header">
              <div id="header_text1">Email: info@XXXXXXXXX.co.uk<br />

               

                  Phone: </div>

               

                  <div class="twoColHybLtHdr" id="header_text">Southbourne Studio<br />

               

                  St Catherine's Road<br />

               

                  Southbourne</div>

               

                   <div id=column container>

               

               

               

                  <div id=center column></div>

               

                  </div>

               

                  </div>
              </body>
              </html>

              • 4. Re: Aligning text to left and right of header - please help!
                Charlie3001 Level 1

                That has fixed it! Thank you so much - have been tearing my hair out over that all afternoon!