4 Replies Latest reply on Dec 14, 2010 6:29 AM by katinka2010

    Text aligment problems with floating div

    katinka2010

      I have troubles with the lay-out. I’m afraid it is a common problem (just an amateur) but couldn’t find the solution.

      I have a container-div and inside this div a content-div and a floating sidebar-div (floating at the right). I would like that the text of the content-div is at the same level as the text of the sidebar-div. Thus… that the text ‘De Spaanse Pyreneeen’ is horizontal at the same level as the text ‘Op zoek naar…’.

      As it is now, everything looks all right on my laptop and in Internet Explorer. But if I look at another PC (also IE) the text ‘De Spaanse Pyreneeen’ appears much lower.

      De site is www.spaanse-pyreneeen.nl and below is the css file.

      I hope anyone can help me.

      Katinka.

       

      body {
      text-align: center;
      margin: 0px;
      padding: 0px;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 12px;
      background-color: #D7D0B4;
      }
      #footer {
      font-size: 9px;
      background-color: #EEE;
      text-align: right;
      padding: 0px;
      clear: both;
      width: 900px;
      margin-top: 0px;
      margin-right: auto;
      margin-bottom: 0px;
      margin-left: auto;
      }
      #sidebar {
      background-color: #EEE;
      text-align: justify;
      float: right;
      width: 150px;
      padding-top: 15px;
      padding-right: 14px;
      padding-bottom: 0px;
      padding-left: 15px;
      border-left-width: 1px;
      border-left-style: solid;
      border-left-color: #55552B;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      }
      #navigatie {
      background-color: #D7D0B4;
      margin: 0px;
      padding: 0px;
      width: 900px;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 12px;
      color: #663;
      }

      #fotos {
      background-color: #EEE;
      text-align: center;
      margin: 0px;
      padding: 0px;
      width: 900px;
      height: 200px;
      }
      .image {
      padding: 0px;
      border-top-style: none;
      border-right-style: none;
      border-bottom-style: none;
      border-left-style: none;
      }

      .floatleft {
      float:left;
      }
      .floatright {
      float:right;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      }

      #container {
      padding: 0px;
      width: 900px;
      margin-top: 0px;
      margin-right: auto;
      margin-bottom: 0px;
      margin-left: auto;
      clear: none;
      background-color: #EEE;
      }
      #header {
      background-color: #EEE;
      height: auto;
      width: 900px;
      margin-top: 0px;
      margin-right: auto;
      margin-bottom: 0px;
      margin-left: auto;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
      }
      #content {
      background-color: #EEE;
      margin-top: 0px;
      margin-right: 180px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 40px;
      padding-right: 50px;
      padding-bottom: 0px;
      padding-left: 50px;
      text-align: justify;
      border-right-width: 1px;
      border-right-style: solid;
      border-right-color: #55552B;
      }
      h1 {
      font-size: 20px;
      margin-top: 0px;
      }
      h2 {
      font-size: 14px;
      margin-bottom: 0px;
      }
      h3 {
      font-size: 14px;
      margin-bottom: 0px;
      }
      body,td,th {
      color: #55552B;
      }
      a:link {
      color: #630;
      }
      a:visited {
      color: #630;
      }
      a:active {
      color: #630;
      }

        • 1. Re: Text aligment problems with floating div
          osgood_ Level 8

          First set your top padding on the 'sidebar' and 'content' <divs> to be the same, 15px (see below). You don't need to declare a zero value on <div> css as this is the default value, so I have removed those as well.

           

           

          #sidebar {
               background-color: #EEE;
               text-align: justify;
               float: right;
               width: 150px;
               padding-top: 15px;
               padding-right: 14px;
               padding-left: 15px;
               border-left-width: 1px;
               border-left-style: solid;
               border-left-color: #55552B;
          }

           

           

          #content {
               background-color: #EEE;
               margin-right: 180px;
               padding-top: 15px;
               padding-right: 50px;
               padding-left: 50px;
               text-align: justify;
               border-right-width: 1px;
               border-right-style: solid;
               border-right-color: #55552B;
          }

           

          Then adjust the margin/padding on your h1 and h3 css as below:

           

           

          h1 {
          font-size: 20px;
          margin: 0;
          padding: 0 0 15px 0; /*top,right,bottom,left*/
          }

          h3 {
          font-size: 14px;
          margin: 0;
          padding: 0 0 15px 0; /*top,right,bottom,left*/
          }


          1 person found this helpful
          • 2. Re: Text aligment problems with floating div
            katinka2010 Level 1

            Thank you for your answer.

            I have made the changes precisely as you said and it looks better on the computer but there is still a difference.

            However, on my laptop it is'n much better. The text of 'De Spaanse Pyreneeen' is right against the menubar.

            Do you have any suggestion?

            Katinka.

            • 3. Re: Text aligment problems with floating div
              osgood_ Level 8

              katinka2010 wrote:

               

              Thank you for your answer.

              I have made the changes precisely as you said and it looks better on the computer but there is still a difference.

              However, on my laptop it is'n much better. The text of 'De Spaanse Pyreneeen' is right against the menubar.

              Do you have any suggestion?

              Katinka.

               

              Amend the 'container' css to as below. Some of the elements in the Spry naviagtion are floated, which takes them out of the normal html flow, therefore you have to 'clear' those floats, hence clear: both; (below) instead of clear: none;

               

              #container {
                  width: 900px;
                  margin-right: auto;
                  margin-left: auto;
                  clear: both;
                  background-color: #EEE;
                 
              }

               

              Then  delete the 'break' in your code below:

               

              <div id="content"><br />
                    <h1>De  Spaanse Pyrenee&euml;n</h1>

              • 4. Re: Text aligment problems with floating div
                katinka2010 Level 1

                Thank you!!! It is solved now.

                Katinka.