2 Replies Latest reply on Feb 17, 2014 6:38 AM by CraftyAnnW

    A 2nd text box


      I have followed David's excellent tutorial (Bayside beat) and have succesfully created a page and even managed the bonus video for the text box and absolute positioning. I would like to add another text box on a different part of the picture - is this possible and if so, how do I do it? Thank you for any help you can give.

        • 1. Re: A 2nd text box
          David_Powers Level 7

          Glad you enjoyed the tutorial.


          Yes, it's possible to add another text box on a different part of the picture. Just nest another element inside the #hero div, give it an ID, and create similar style rules for it.


          #secondBox {

              position: absolute;

              top: 100px;

              left : 20px;



          Because the #hero div has its position property set to relative, absolutely positioned elements nested inside will calculate their offsets from the edges of the #hero div.


          It's important to understand that this happens only when the absolutely positioned element is nested inside a relatively positioned one. Without the relatively positioned outer element, absolute positioning is calculated from the edges of the page. Because you have no way of knowing how wide the user's browser window will be, using absolute positioning on its own results in the positioned element appearing to move. In fact, it doesn't move. It remains absolutely positioned in relation to the edges of the page.


          It's a complicated subject, but I hope that explains it clearly enough.

          • 2. Re: A 2nd text box
            CraftyAnnW Level 1

            Thank you so much David, that is a big help. I'm a complete novice at this but thanks to you am achieving way more than I ever thought I would or could!