3 Replies Latest reply: Apr 10, 2014 9:22 AM by Nancy O. RSS

    divs overlapping

    richardswife Community Member

      http://www.jordankrose.com/jkr_shortStories2.html

      EVA PRIM WRITES—
      CHOICES. ANARCHY. HYPOCRISY.

      this section (shorts3) has been a nightmare.  The buyshorts3 div will not format correctly; it was going under the text below, so I moved it above the text.  my client will not like that as it is not consistent with other parts of the page.

       

      Thanks for your help.

        • 1. Re: divs overlapping
          weblancer.eu

          try using a clearfix div like example below:

           

          HTML:

          your content

          <div class="clearfix"></div>

          your content

           

          where CSS:

          .clearfix {

               clear: both;

          }

           

          you can find that i use that solution on my website, viewing the source code:  http://www.weblancer.eu

           

          i hope help you

          • 2. Re: divs overlapping
            osgood_ MVP

            richardswife wrote:

             

            http://www.jordankrose.com/jkr_shortStories2.html

            EVA PRIM WRITES—
            CHOICES. ANARCHY. HYPOCRISY.

            this section (shorts3) has been a nightmare.  The buyshorts3 div will not format correctly; it was going under the text below, so I moved it above the text.  my client will not like that as it is not consistent with other parts of the page.

             

            Thanks for your help.

             

            You're making it a nightmare because you're trying to layout a web page in the same way as you would approach a desk top publishing page.

             

            You're trying to fit text in the spaces allocated on one big background image, this is never going to work successfully because everyone has their browsers set up differently.

             

            You would be far better 'isolating' each book and eack books details in their own container. Yes you dont get the 'integrated runaround' look but what you do get is a webapage that is far better suited to more devices and far easier to manage in terms of producing.

             

            At the moment you can come up with a number of 'hacky' fixes but you will never know how it really performs on a wider range of different set ups people use to view the page.

            • 3. Re: divs overlapping
              Nancy O. MVP

              To illustrate what Osgood is saying, this is what your page looks like when text size is increased in browsers. 

              EvaPrimm.jpg

              You're trying to precisely align text over this complex background image

              http://www.jordankrose.com/images/short_stories.jpg

              which is like trying to nail Jell-O to a wall.  It doesn't work. 

               

              My advice is to simplify your layout approach & use a less complex background-image that is able to repeat vertically.  The book covers need to be inserted as separate floated foreground images.  See example below.

              http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml

               

               

              Nancy O.